Javascript 带有预览和删除功能的图像上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10206648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image Upload with Preview and Delete
提问by user1315468
Have the followig questions and need answers regarding the following script that will Preview a Photo before upload. The script is from http://jsbin.com/uboqu3/edit#javascript,html
有以下问题并需要有关以下脚本的答案，该脚本将在上传前预览照片。该脚本来自http://jsbin.com/uboqu3/edit#javascript,html
1) The script works for Firefox, no good for IE. How to make it works for IE?
1) 该脚本适用于 Firefox，不适用于 IE。如何使它适用于 IE？
2) It does not have a method to delete the photo. Needs something like a small image "X" installed on the Preview Photo, clicking this "X" will delete the photo. Can anyone supply this solution?
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>
回答by mplungjan
Tested on several browsers, Chrome, Fx, Safari 6 (could someone test 5?)
在多个浏览器上进行了测试，Chrome、Fx、Safari 6（有人可以测试 5 吗？）
Works on my IE8 on XP without any changes in settings but as @Gunasekaran mentions later on this page you may need to
可以在 XP 上的 IE8 上运行而无需更改设置，但正如 @Gunasekaran 在本页后面提到的那样，您可能需要
Open Tools->internet option-> security tab-> custom level - locate the setting "Include local directory path when uploading files to a server" and click on Enable.
打开工具->互联网选项->安全选项卡->自定义级别-找到“将文件上传到服务器时包括本地目录路径”设置，然后单击启用。
<!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>
Looks like this in IE8 on XP:
在 XP 上的 IE8 中看起来像这样：
A newer method is createObjectURLwhich I have not implemented
一个较新的方法是createObjectURL，我还没有实现
UpdateYou will need to add an onclick to clear the file input if you want to allow the user to select the same image twice (onchange does not trigger then)
更新如果要允许用户两次选择相同的图像，则需要添加 onclick 以清除文件输入（然后不触发 onchange）
HTML input file selection event not firing upon selecting the same file
回答by Manse
This will not work on anything less that Internet Explorer 10 ... FileReader()support isn't introduced until IE10 .. it will work with Chrome 7 and Firefox 3.6
这对 Internet Explorer 10 以外的任何东西都不起作用……FileReader()直到 IE10 才引入支持……它将适用于 Chrome 7 和 Firefox 3.6
回答by Gunasekaran R
In reply to last response of @user1315468 IE8 needs a security settings change:
回复 @user1315468 的最后回复 IE8 需要更改安全设置：
Open Tools->internet option-> security tab-> custom level locate the setting "Include local directory path when uploading files to a server" and click on Enable.
打开工具-> 互联网选项-> 安全选项卡-> 自定义级别找到设置“将文件上传到服务器时包括本地目录路径”，然后单击启用。
After this change, you can reopen the browser with mplungjan's demo link. Hope this helps.
进行此更改后，您可以使用 mplungjan 的演示链接重新打开浏览器。希望这可以帮助。
回答by Abdul Razak
**I have Pasted the complete working code for all browsers..
**我已经为所有浏览器粘贴了完整的工作代码..
NOTE: sometimes Internet Explorer may block scripts,so inorder to view the image click on the prompt and "Allow blocked content".Below is the working code...**
注意：有时 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>
回答by Ankit Garg
FileReader sounds great to read content of image or file. But consider that file that you were reading was 20MB big, reading it as dataURL is going to create a JS object which is tat big. How do you avoid that ?
FileReader 听起来很适合读取图像或文件的内容。但是考虑到您正在读取的文件有 20MB 大，将其读取为 dataURL 将创建一个很大的 JS 对象。你如何避免这种情况？
回答by Tran Anh Hien
<img id="img1" alt="" runat="server"/>
<span id="x" ></span>
<asp:FileUpload runat="server" ID="FileUpload1" onchange="readURL(this)" />
<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('');
});
});
Worked for me :)
为我工作:)
