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

Ответ 1

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

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

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

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

Если вы хотите попробовать это трудно (или оно не работает), посмотрите 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

Ответ 2

Я использовал 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();
});

Ответ 3

Моим решением было использование 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');
    };
}

Ответ 4

После этого я начал реализовывать FileReader для браузеров, которые его поддерживают (Chrome, Firefox и еще неизданный Safari 6), а также PHP script, который возвращает данные POSTed обратно в качестве Base64- закодированные данные для других браузеров.

Ответ 5

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