带有base64数据内容的HTML5对象标记会导致Chrome崩溃

时间:2011-10-27 17:41:45

标签: html5 google-chrome filereader

我正在使用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]); 

当我在Chrome中上传大约1.5Mb的pdf时,一切正常。当我尝试以1.5Mb或更高版本上传时,Chrome(V15)会因“aw snap”消息而崩溃。它显示“我们在这里很好”的消息,但在下一行崩溃。

任何人都有关于如何修复或解决方法的任何好主意?感谢。

1 个答案:

答案 0 :(得分:2)

您应该高度考虑使用blob 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 + '" />';
}
....