Отримати файлові дані Base64 з форми введення

У мене є основна форма HTML, з якої я можу взяти трохи інформації, яку я вивчаю в Firebug.

Єдині мої проблеми - це те, що я намагаюсь базувати кодування файлових даних, перш ніж надсилати їх на сервер, де потрібно бути в цій формі для збереження в базі даних.

<input type="file" id="fileupload" />

І в Javascript + jQuery:

var file = $('#fileupload').attr("files")[0];

У мене є кілька операцій на основі доступного javascript: .getAsBinary (), .getAsText (), .getAsTextURL

Однак жоден із цих повернених корисних текстів, які можна вставити, оскільки вони містять непридатні "символи" - я не хочу, щоб у моєму файлі завантажувався "postback", і мені потрібно мати кілька форм, орієнтованих на конкретні об'єкти, тому важливо отримати файл і використовувати Javascript таким чином.

Як мені отримати файл таким чином, щоб я міг використовувати один з кодерів Javascript base64, які широко доступні !?

Дякую

Оновлення - Починаючи з винагороди тут, потрібна підтримка між браузера !!!

Ось де я перебуваю:

<input type="file" id="fileuploadform" />

<script type="text/javascript">
var uploadformid = 'fileuploadform';
var uploadform = document.getElementById(uploadformid);


/* method to fetch and encode specific file here based on different browsers */

</script>

Кілька проблем із підтримкою крос-браузера:

var file = $j(fileUpload.toString()).attr('files')[0];
fileBody = file.getAsDataURL(); // only would works in Firefox

Також IE не підтримує:

var file = $j(fileUpload.toString()).attr('files')[0];

Тому я повинен замінити на:

var element = 'id';
var element = document.getElementById(id);

Для підтримки IE.

Це працює в Firefox, Chrome і, Safari (але файл не кодується належним чином або принаймні після його розміщення файл не виходить правильно)

var file = $j(fileUpload.toString()).attr('files')[0];
var encoded = Btoa(file);

Також,

file.readAsArrayBuffer() 

Здається, підтримується лише в HTML5?

Багато людей запропонували: http://www.webtoolkit.info/javascript-base64.html

Але це лише повертає en помилку методу UTF_8, перш ніж він64 кодує? (або порожній рядок)

var encoded = Base64.encode(file); 

Це цілком можливо в JavaScript на стороні браузера.

Простий спосіб:

Метод readAsDataURL () може вже кодувати його як base64. Можливо, вам буде потрібно викреслити початкові матеріали (до перших,), але це не є великим. Це зайняло б все задоволення, хоча.

Важкий шлях:

Якщо ви хочете спробувати це важким способом (або він не працює), подивіться readAsArrayBuffer(). Це дасть вам Uint8Array, і ви можете використовувати вказаний метод. Це, мабуть, корисно лише в тому випадку, якщо ви хочете возитися з самими даними, наприклад, маніпулюючи зображеннями зображення або виконуючи інші магії вуду перед завантаженням.

Є два способи:

• Перетворити на рядок і використовувати вбудований btoa або подібний
  • Я не перевіряв усіх випадків, але працює для мене - просто дістаньте char-коди
• Перетворити безпосередньо з Uint8Array в base64

Нещодавно я реалізував tar у браузері . У рамках цього процесу я зробив власну безпосередню реалізацію Uint8Array-> base64. Я не думаю, що вам це знадобиться, але це так тут, якщо ви хочете подивитися. це досить акуратно.

Що я зараз роблю:

Код для перетворення в рядок з Uint8Array досить простий (де buf - це Uint8Array):

function uint8ToString(buf) {
    var i, length, out = '';
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

Звідти просто зробіть:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 тепер буде рядком, кодованим base64, і його слід завантажувати просто персиково. Спробуйте це, якщо ви хочете двічі перевірити перед натисканням:

window.open("data:application/octet-stream;base64," + base64);

Це завантажить його як файл.

Інша інформація:

Щоб отримати дані як Uint8Array, подивіться документи MDN:

• https://developer.mozilla.org/en/DOM/FileReader

Моїм рішенням було використання readAsBinaryString()та btoa()його результат.

uploadFileToServer(event) {
    var file = event.srcElement.files[0];
    console.log(file);
    var reader = new FileReader();
    reader.readAsBinaryString(file);

    reader.onload = function() {
        console.log(btoa(reader.result));
    };
    reader.onerror = function() {
        console.log('there are some problems');
    };
}

Я використовував FileReader для відображення зображення при натисканні кнопки завантаження файлу, не використовуючи жодних запитів Ajax. Далі йде надія коду, яка може допомогти комусь.

$(document).ready(function($) {
    $.extend( true, jQuery.fn, {        
        imagePreview: function( options ){          
            var defaults = {};
            if( options ){
                $.extend( true, defaults, options );
            }
            $.each( this, function(){
                var $this = $( this );              
                $this.bind( 'change', function( evt ){

                    var files = evt.target.files; // FileList object
                    // Loop through the FileList and render image files as thumbnails.
                    for (var i = 0, f; f = files[i]; i++) {
                        // Only process image files.
                        if (!f.type.match('image.*')) {
                        continue;
                        }
                        var reader = new FileReader();
                        // Closure to capture the file information.
                        reader.onload = (function(theFile) {
                            return function(e) {
                                // Render thumbnail.
                                    $('#imageURL').attr('src',e.target.result);                         
                            };
                        })(f);
                        // Read in the image file as a data URL.
                        reader.readAsDataURL(f);
                    }

                });
            });
        }   
    });
    $( '#fileinput' ).imagePreview();
});

Сам бореться з цим, я прийшов реалізувати FileReader для браузерів, які його підтримують (Chrome, Firefox та поки що не вийшов Safari 6), і PHP-скрипт, який повторює дані POSTed файлів як кодовані Base64 дані для інших браузери.

Я почав думати, що використання "iframe" для завантаження в стилі Ajax може бути набагато кращим вибором для моєї ситуації, поки HTML5 не вийде повним колом і мені не доведеться підтримувати застарілі браузери в моєму додатку!

Натхненний відповіддю @ Йозефа:

const fileToBase64 = async (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (e) => reject(e)
  })

const file = event.srcElement.files[0];
const imageStr = await fileToBase64(file)