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

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

91 голосов
/ 08 августа 2011

У меня есть базовая форма 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 ]

114 голосов
/ 08 августа 2011

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

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

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

Сложный путь:

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

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

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

22 голосов
/ 07 марта 2017

Мое решение было использовать 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');
    };
}
14 голосов
/ 22 июня 2012

Я использовал 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();
});
1 голос
/ 03 апреля 2012

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

0 голосов
/ 20 августа 2011

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

...