帶有base64數據內容的HTML5 Object標記導致Chrome崩潰

我正在使用HTML5 FileReader讀取本地文件。然後我想在上傳到服務器之前立即在瀏覽器中顯示文件內容。帶有base64數據內容的HTML5 Object標記導致Chrome崩潰

我讀的文件，並試圖顯示，如下所示：

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上傳PDF高達約有1.5Mb，這一切工作正常。當我嘗試上傳1.5Mb或更高版本時，Chrome（V15）以「aw snap」消息崩潰。它顯示「我們在這裏很好」的消息，但在下面的行中崩潰。

任何人有任何關於如何解決或解決方法的明智想法？謝謝。

來源

2011-10-27 Journeyman

我建議你在Chromium問題跟蹤文件，這並要求幫助那裏 - 也許開發者更好地瞭解 –

破天一樣對我來說，這似乎是相關的渲染引擎。您是否偶然向Chromium開發團隊發佈了錯誤？ – Chubas

您應該高度考慮使用blob URL而不是數據URL。您實際上並未操縱文件的字節，因此沒有理由將整個文件讀入內存，然後將其作爲數據URL添加33％的base64編碼開銷。

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

來源

2011-10-27 19:47:00 ebidel

記得檢查這些功能上的瀏覽器兼容性 https://developer.mozilla.org/en-US/docs/Web/API/Window.URL#Browser_compatibility – Hulvej

您先生，是JS人中的上帝！： - * – walialu

帶有base64數據內容的HTML5 Object標記導致Chrome崩潰

回答

相關問題