使用 JavaScript FileReader 显示图像答案

【问题标题】：Display image with JavaScript FileReader使用 JavaScript FileReader 显示图像
【发布时间】：2015-10-23 13:29:45
【问题描述】：

我正在尝试在通过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中）

【问题讨论】：

在 jsfiddle 上复制问题。顺便说一句，在您发布的代码中提供更多上下文。

标签： javascript jquery html image

【解决方案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 中修复了……但是当我正在寻找解决问题的方法时，我想在这里澄清一下，因为这可能对其他人有所帮助。

【讨论】：