Получить кодирование файловых данных Base64 из формы ввода

У меня есть базовая HTML-форма, из которой я могу получить немного информации, которую изучаю в Firebug.

Моя единственная проблема заключается в том, что я пытаюсь кодировать данные файла в base64 перед отправкой на сервер, где он должен быть в этой форме для сохранения в базе данных.

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

А в Javascript + jQuery:

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

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

Однако ни один из них не возвращает полезный текст, который можно вставить, поскольку они содержат непригодные для использования «символы» - я не хочу, чтобы в моем загруженном файле происходила «обратная передача», и мне нужно иметь несколько форм, нацеленных на определенные объекты, поэтому важно, чтобы я получить файл и использовать 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 до того, как он закодирует base64? (или пустая строка)

var encoded = Base64.encode(file); 

Это вполне возможно в javascript на стороне браузера.

Легкий способ:

Метод readAsDataURL () может уже закодировать его как base64 для вас. Вам, вероятно, придется вырезать начальный материал (вплоть до первого), но это не так уж важно. Однако это лишило бы всех удовольствия.

Трудный путь:

Если вы хотите попробовать это на собственном опыте (или он не работает), посмотрите readAsArrayBuffer(). Это даст вам Uint8Array, и вы сможете использовать указанный метод. Это, вероятно, полезно только в том случае, если вы хотите возиться с самими данными, например, манипулировать данными изображения или выполнять другую магию вуду перед загрузкой.

Есть два метода:

• Преобразуйте в строку и используйте встроенный btoaили аналогичный
  • Я не тестировал все случаи, но у меня работает - просто получите коды символов
• Преобразование напрямую из 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 не вернется на круги своя, и мне не придется поддерживать устаревшие браузеры в моем приложении!

Вдохновленный ответом @ Josef:

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)