使用预览和删除功能上传图像
[英]Image Upload with Preview and Delete
问题描述
有以下问题，并需要有关以下脚本的答案，这些脚本将在上传前预览照片。 该脚本来自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>
6 个解决方案
解决方案1
6 2012-04-18 09:44:23
在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不会触发）
解决方案2
2 2012-04-18 09:36:22
在Internet Explorer 10或FileReader()上，此功能将无法正常工作。直到IE10才引入FileReader()支持。它将与Chrome 7和Firefox 3.6一起使用
解决方案3
1 2012-07-05 07:19:58
为了回复@ user1315468的最新响应，IE8需要更改安全设置：
打开工具->互联网选项->安全选项卡->自定义级别，找到设置“将文件上传到服务器时包括本地目录路径”，然后单击启用。
进行此更改后，您可以使用mplungjan的演示链接重新打开浏览器。 希望这可以帮助。
解决方案4
0 2013-03-06 12:40:20
**我已为所有浏览器粘贴了完整的工作代码。
注意：有时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>
解决方案5
0 2014-01-08 23:58:26
FileReader听起来很不错，可以读取图像或文件的内容。 但是请考虑一下，您正在读取的文件大20MB，因为dataURL将要创建一个大的JS对象，因此读取该文件。 您如何避免这种情况？
解决方案6
0 2016-11-03 08:15:35
<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('');
});
});
为我工作:)
带有预览和删除选项的图像上传 - Javascript / Jquery
[英]Image Upload with preview and Delete option - Javascript / Jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.