带有预览和删除功能的图像上传答案

【问题标题】：Image Upload with Preview and Delete带有预览和删除功能的图像上传
【发布时间】：2012-04-29 16:51:53
【问题描述】：

对于以下将在上传前预览照片的脚本有以下问题并需要答案。脚本来自http://jsbin.com/uboqu3/edit#javascript,html

1) 该脚本适用于 Firefox，不适用于 IE。如何使它适用于 IE？

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

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
}
</script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>

【问题讨论】：

你在 IE 上遇到什么错误？
是的，您能否提供更多信息或将示例发布到jsfiddle.net

标签： javascript jquery upload

【解决方案1】：

Demo

在多种浏览器上测试，Chrome、Fx、Safari 6（有人可以测试 5 吗？）

在我的 XP 上的 IE8 上工作，设置没有任何更改，但正如 @Gunasekaran 在本页后面提到的那样，您可能需要

打开工具->互联网选项->安全选项卡->自定义级别-找到“上传文件到服务器时包括本地目录路径”设置并点击启用。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html>

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

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

更新如果你想让用户选择同一张图片两次，你需要添加一个 onclick 来清除文件输入（onchange 不会触发）

HTML input file selection event not firing upon selecting the same file

【讨论】：

抱歉，您的解决方案不起作用。在IE8上测试过，还是不行。
上传了一个新的演示并更新了代码。包括隐藏按钮的作品 - 对我来说 IE8 XP, FX 10
抱歉，在我的 IE8 上尝试了您的代码，但仍然无法正常工作，请查看我的 IE8 的屏幕截图以获取您的代码：asuma.com/user1231/ss-120418.jpg 预览图片显示为损坏的图像。
什么版本在什么平台上？
stackoverflow.com/questions/12030686/… - 我更新了答案。谢谢

【解决方案2】：

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

See the docs for support of FileReader 或 caniuse.com here

【讨论】：

抱歉，您的回答无效。在 IE 8 上测试它并没有工作。
@user1315468 我有点困惑......在我的回答中我告诉过你它在 IE8 中不起作用......请参阅我添加的链接
抱歉，我提供了不正确的评论。旧浏览器的任何解决方案？
@user1315468 只是一个快速的谷歌返回这个 -> code.google.com/p/image-upload-preview（以前从未使用过它，但说它支持 IE8
但是DEMO链接失效了

【解决方案3】：

回复@user1315468 的最后回复 IE8 需要更改安全设置：

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

修改后，您可以使用mplungjan 的演示链接重新打开浏览器。希望这会有所帮助。

【讨论】：

【解决方案4】：

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

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

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

</head>

<body>
<form name="form2">

<div>
<input type="file"  name="myFile"   id="myFile" onchange="readURL(this);"></input>
</div>

<div>
<img id="previewImg" src="#" />
</div>

</form>
<script>

function readURL(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#previewImg')
            .attr('src', e.target.result)
            .width(130);
    }
reader.readAsDataURL(input.files[0]);

}else{
          var filename = "";
         filename = "file:\/\/"+input.value;
         document.form2.previewImg.src=filename;
         document.form2.previewImg.style.width="130px";

 }
}
 </script>   
</body>
</html>

【讨论】：

previewImg 不能通过 document.form2 访问，除非它是

【解决方案5】：

FileReader 听起来很适合读取图像或文件的内容。但是考虑到您正在读取的文件有 20MB 大，将其作为 dataURL 读取将创建一个非常大的 JS 对象。你如何避免这种情况？

【讨论】：

【解决方案6】：

<img id="img1" alt="" runat="server"/> <span id="x" ></span> <asp:FileUpload runat="server" ID="FileUpload1" onchange="readURL(this)" />

<script type="text/javascript">
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#imgRepresentImage").attr("src", e.target.result).width(200);
        };
        reader.readAsDataURL(input.files[0]);
    } else {
        var img = input.value;
        $("#imgRepresentImage").attr("src", img).width(200);
    }
    $("#x").text('[X]');
}
$(document).ready(function () {
    $("#x").click(function () {
        $("#imgRepresentImage").attr("src", "").width(0);
        $("#x").text('');
        $("#representImageUpload").val('');
    });
});

为我工作:)

【讨论】：