图片上传与预览和删除

问题描述：

有关于以下脚本的followig问题和需要答案，将在上传前预览图片。脚本是从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什么错误？ – ManseUK 2012-04-18 09:35:20

是啊，你能提供一些更多的信息或张贴到例如http://jsfiddle.net/ – 2012-04-18 09:36:35

答

这将不会对任何东西少的Internet Explorer 10 ...支持没有出台，直到IE10 ..它会与Chrome的7和Firefox 3.6

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

对不起，你的答案是行不通的。测试它在IE 8上，它没有工作。 – user1315468 2012-04-18 09:58:19

@ user1315468 IM略有迷茫......在我的答案我告诉你，它不会在IE8工作...看我加 – ManseUK 2012-04-18 09:59:37

对不起的联系，我提供了一个不正确的评论。针对较旧浏览器的解决方案？ – user1315468 2012-04-18 10:02:02

答

携手

Demo

测试在几个浏览器，Chrome浏览器，外汇，Safari浏览器6（可能有人测试5？）

我的IE8在XP件

作品没有设置，但任何变化@Gunasekaran此页面上以后提到您可能需要

打开工具 - > Internet选项 - >安全选项卡 - >自定义级别 - 定位设置“将文件上传到服务器时包含本地目录路径”并单击启用。

<!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>

看起来这在IE8在XP：

Example

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

更新您需要添加一个onclick来清除文件输入，如果你想要的话W上的用户选择两次相同的图像（平变化不会那么触发）

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

对不起，您的解决方案是行不通的。测试了IE8，和它做。不行 – user1315468 2012-04-18 10:00:15

上传一个新的演示和更新的代码工作，包括隐藏按钮 - 我IE8 XP，FX 10 – mplungjan 2012-04-18 12:45:30

对不起，试图在我的IE浏览器的代码8但仍然无法正常工作，请参阅我的IE8的屏幕截图以获得您的代码：http://www.asuma.com/user1231/ss-120418.jpg预览图片显示为破碎的图片。 – user1315468 2012-04-18 16:34:01

答

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

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

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

答

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

注：有时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访问，除非它是 mplungjan 2013-08-07 06:38:29

答

FileReader听起来不错，阅读图像或文件的内容。但是考虑一下你正在阅读的文件是20MB大，阅读它，因为dataURL将创建一个很大的JS对象。你如何避免这种情况？

答

<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(''); 
    }); 
});

为我工作:)

图片上传与预览和删除

相关推荐