带有base64数据内容的HTML5 Object标记会导致Chrome崩溃 [英] HTML5 Object tag with base64 data content causes Chrome to crash

问题描述

我正在使用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 =zzzxxxdata ='+ reader.result +''; 
 if（filetype.toLowerCase（）=='pdf'）{
 //对于pdf文档，指定高度和宽度
 html + ='width =770height =350 '; 
} 
 html + ='>'; 
 html + ='< / object>'; 
} 
 alert（'我们在这里很好'）; 
 $（'＃molecule-docviewer'）。html（html）; 
 alert（'我们已经崩溃了'）; 
 MarkMoleculeAsDirty（）; 
} 
 reader.readAsDataURL（filelist [0]）; 
  

当我在Chrome中上传大约1.5Mb的PDF时，它一切正常。当我尝试上传1.5Mb或更高版本时，Chrome（V15）以aw snap消息崩溃。它显示我们在这里很好的消息，但在下面的行崩溃。

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

Using_files_from_web_applications＃Example.3a_Using_object_URLs_to_display_imagesrel =nofollow> 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 +'/> gt ;'; 
} 
 .... 
  

I am using the HTML5 FileReader to read a local file. I then want to immediately display the file contents within the browser, prior to uploading to the server.

I read the file, and attempt to display it, as follows:

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]); 

When I upload a pdf up to around 1.5Mb in Chrome, it all works fine. When I try uploading at 1.5Mb or larger, Chrome (V15) crashes with an "aw snap" message. It displays the "we get here fine" message, but crashes on the following line.

Anyone got any bright ideas on how to fix or workaround? Thanks.

解决方案

You should highly consider using a blob URL instead of a data URL. You're not actually manipulating the bytes of the file, so there is no reason to read the entire file into memory, then add a 33% overhead of base64 encoding it as a data 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 + '" />';
}
....

这篇关于带有base64数据内容的HTML5 Object标记会导致Chrome崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！