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

Я использую 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». Он отображает сообщение «мы доехали нормально», но вылетает на следующей строке.

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


person Journeyman    schedule 27.10.2011    source источник
comment
Я предлагаю вам зарегистрировать это в системе отслеживания проблем Chromium и попросить помощи там — возможно, разработчики знают лучше   -  person Mikko Ohtamaa    schedule 27.10.2011
comment
То же самое происходит и со мной, похоже, это связано с движком рендеринга. Вы случайно не отправили сообщение об ошибке команде разработчиков Chromium?   -  person Chubas    schedule 05.01.2012


Ответы (1)


Вам настоятельно рекомендуется использовать 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 + '" />';
}
....
person ebidel    schedule 27.10.2011
comment
не забудьте проверить совместимость браузера с этими функциями developer.mozilla .org/en-US/docs/Web/API/ - person Hulvej; 12.08.2014
comment
Вы, сэр, бог среди JS-людей! :-* - person Walialu; 09.03.2017