HTML5中使用base64数据内容的Object标签会导致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]); 

当我在Chrome上上传约1.5Mb左右的pdf文件时，一切都正常。但当我尝试上传1.5Mb或更大的文件时，Chrome (V15)会崩溃并显示"aw snap"消息。它会显示 "我们成功到达这里" 的消息，但在下一行代码处崩溃。

有人有任何解决或解决方案的明智想法吗？谢谢。

- Journeyman

---

我建议您将此问题提交到Chromium问题跟踪器，并在那里寻求帮助 - 也许开发人员更清楚。 - Mikko Ohtamaa

发生了同样的事情，似乎与渲染引擎有关。你碰巧向Chromium开发团队报告了这个错误吗？ - Chubas

Answer 1

在处理文件时，强烈建议使用Blob URL而不是Data URL。因为您实际上并没有操纵文件的字节，所以没有必要将整个文件读入内存，然后再通过Base64编码作为Data URL增加33%的开销。

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 + '" />';
}
....

- ebidel

---

请记得在这些特性上检查浏览器兼容性。https://developer.mozilla.org/zh-CN/docs/Web/API/Window.URL#Browser_compatibility - Hulvej

你，先生，在JS开发者中是一个伟大的存在！ :-* - Walialu