Получить 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 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);
5 80
javascript html file-upload base64

5 ответов:

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

самый простой способ:

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

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

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

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

  • преобразовать в строку и использовать встроенный btoa или похожие
    • я не проверял все случаи, но работает для меня-просто получить char-коды
  • конвертировать непосредственно из a 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, и она должна загружать только peachy. Попробуйте это, если вы хотите, чтобы дважды проверить перед нажатием:

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

это будет загрузить его в виде файла.

прочая информация:

чтобы получить данные в виде Uint8Array, посмотрите на документы MDN:

110

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

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

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

1

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

0