使用JavaScript FileReader顯示圖像

Question

我試圖顯示圖像，然后再通過javascript / jQuery上傳。

我正在jQuery Fileuploader的ADD方法中執行此代碼。 數據屬性為我提供了文件

var reader = new FileReader();
reader.onload = function(e) {
  var img = $('<img></img>');
  img.attr('src', e.target.result);
  $("#general_dropable").append(img);
}
reader.readAsDataURL(file); // Retrieved from the data-attribute of the ADD-Method of the jQuery Fileuploader

顯示效果很好。 但是，當我在Google-Chrome拖動圖像時，我從Chrome中收到此錯誤：

He's dead, Jim! Either Chrome ran out of memory or the process for the webpage was terminated for some other reason. To continue, reload or go to another page.

在Firefox拖動圖像效果很好。

圖像源是圖像的實際源代碼 ，而不是絕對路徑。

有沒有解決此bug的方法？

非常感謝你。

編輯

您可以在此處看到一個實時示例： http : //jsfiddle.net/Fractaliste/LvsYc/1669/只需在上傳后拖動圖像，就會出現錯誤（在Chrome中）

Answer 1

我剛剛在stackoverflow上發現了這個問題。 但是看着jsfiddle，我在Chrome中再也沒有這個異常了（Chrome 46）。 對我來說，當您將其寫入DOM（reader.readAsDataURL）時，似乎忘記了在函數中定義“文件”變量。 但是在您的 jsfiddle中，它似乎是固定的：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();            
        reader.onload = function (e) {
            $('#target').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

..這不是我的答案，因為它已經在jsfiddle中修復了...但是當我在尋找解決問題的方法時，我想在這里澄清一下，因為這可能會對其他人有所幫助。