使用JavaScript显示图像FileReader

我试图在通过javascript/jQuery上传图像之前显示图像。使用JavaScript显示图像FileReader

我在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浏览）

来源

2014-04-05 JustBasti

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

我刚刚发现计算器这个问题。但看着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固定......但是我正在寻找我的问题的解决方案我想澄清的事情因为这可能会帮助其他人。

来源

2015-10-23 05:29:45 leole

使用JavaScript显示图像FileReader

回答

相关问题