HTML5-объектный тег с содержимым данных base64 приводит к сбою Chrome

Question

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

Я читаю файл и пытаюсь отобразить его следующим образом:

var reader = new FileReader();
    reader.onloadend = function () {
        _moleculefilestream = reader.result;
        _molecule.filename = filelist[0].name;
        var filetype = _molecule.filename.substring(_molecule.filename.length - 3);
        var html = '';
        if (filetype == 'jpg' || filetype == 'gif' || filetype == 'png' || filetype == 'tif' || filetype == 'bmp') {
            html += '<img src="' + reader.result + '" />';
        }
        else {
            html += '<object id="zzzxxx" data="' + reader.result + '"';
            if (filetype.toLowerCase() == 'pdf') {
                // For pdf docs, specify a height and width
                html += ' width="770" height="350"';
            }
            html += '>';
            html += '</object>';
        }
        alert('we get here fine');
        $('#molecule-docviewer').html(html);
        alert('we have crashed by this point');
        MarkMoleculeAsDirty();
    }
    reader.readAsDataURL(filelist[0]); 

КогдаЯ загружаю PDF-файл размером до 1,5 МБ в Chrome, все работает нормально.Когда я пытаюсь загрузить файл размером 1,5 Мб или больше, Chrome (V15) вылетает с сообщением «aw snap».Он отображает сообщение «у нас все хорошо», но вылетает в следующей строке.

У кого-нибудь есть какие-нибудь блестящие идеи о том, как это исправить или обойти?Спасибо.

Answer 1

Рекомендуется использовать BLOB-URL вместо URL-адреса данных. Вы на самом деле не манипулируете байтами файла, поэтому нет смысла считывать весь файл в память, а затем добавить 33% накладных расходов на base64, кодирующее его как URL-адрес данных.

window.URL = window.URL || window.webkitURL;

var file = filelist[0];
var url = window.URL.createObjectURL(file);
var html = '';
if (file.type && file.type.match('image/.*')) {
  html += '<img src="' + url + '" />';
}
....