使用预览和删除图像上传

有关于以下脚本的跟随问题和需要答案，这些脚本将在上传之前预览照片。 该脚本来自http://jsbin.com/uboqu3/edithttps://stackoverflow.com/questions/10206648/image-upload-with-preview-and-delete/#javascript,html

1）该脚本适用于Firefox，对IE没有好处。 如何让它适用于IE？

2）没有删除照片的方法。 需要像预览照片上安装的小图像“X”，单击此“X”将删除照片。 有谁能提供这个解决方案？

     function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('https://stackoverflow.com/questions/10206648/image-upload-with-preview-and-delete/#img_prev') .attr('src', e.target.result) .height(200); }; reader.readAsDataURL(input.files[0]); } }      article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }        

Answer 1

演示

在几个浏览器上测试过Chrome，Fx，Safari 6（有人可以测试5个吗？）

适用于我的IE8上的IE8而没有任何设置更改，但是@Gunasekaran稍后会在本页面提及您可能需要

打开工具 – > Internet选项 – >安全选项卡 – >自定义级别 – 找到“将文件上载到服务器时包括本地目录路径”设置，然后单击“启用”。

            
 
   [X]  
   

---

在IE8上的IE8中看起来像这样：

一个较新的方法是createObjectURL ，我还没有实现

更新如果要允许用户选择两次相同的图像，则需要添加onclick以清除文件输入（onchange不会触发）

选择相同文件时不会触发HTML输入文件选择事件

Answer 2

这不适用于任何少于Internet Explorer 10 … FileReader()支持直到IE10才引入..它将适用于Chrome 7和Firefox 3.6

请在 此处 查看文档以获取FileReader或caniuse.com的 支持

Answer 3

在回复@ user1315468 IE8的最后一个响应时，需要更改安全设置：

打开工具 – > Internet选项 – >安全选项卡 – >自定义级别找到“将文件上载到服务器时包括本地目录路径”设置，然后单击“启用”。

完成此更改后，您可以使用mplungjan的演示链接重新打开浏览器。 希望这可以帮助。

Answer 4

**我已经粘贴了所有浏览器的完整工作代码..

注意：有时Internet Explorer可能会阻止脚本，因此要查看图像，请单击提示和“允许阻止的内容”.Below是工作代码… **

Answer 5

FileReader听起来很棒，可以读取图像或文件的内容。 但是考虑到你正在阅读的文件是20MB大，读取它作为dataURL将创建一个很大的JS对象。 你怎么避免这种情况？

Answer 6

为我工作:)