使用 JQuery 创建图像的实时预览（上传之前）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17083626/
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
Create live preview of image (before upload it) using JQuery
提问by Snake Eyes
I want to create a preview for image before upload it on the server, using JQuery.
我想在将图像上传到服务器之前使用 JQuery 创建图像预览。
My code, js code:
我的代码，js代码：
$(function(){
Test = {
UpdatePreview: function(obj){
// if IE < 10 doesn't support FileReader
if(!window.FileReader){
// don't know how to proceed to assign src to image tag
} else {
var reader = new FileReader();
var target = null;
reader.onload = function(e) {
target = e.target || e.srcElement;
$("img").prop("src", target.result);
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
My html:
我的html：
<input type='file' name='browse' onchange='Test.UpdatePreview(this)' />
<br/><br/>
<img src="#" alt="test" width="128" height="128" />
See jsfiddle: http://jsfiddle.net/aAuMU/
见jsfiddle：http: //jsfiddle.net/aAuMU/
After onload, I see the src of image (using Google console application) and it looks like:
之后onload，我看到图像的 src（使用 Google 控制台应用程序），它看起来像：
data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsA...
data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsA...
It is a way to get in javascript the base of image and assign to image in case I'm using IE as browser ?
这是一种在javascript中获取图像基础并分配给图像的方法，以防我使用IE作为浏览器？
FileReaderdoesn't work in IE < 10.
FileReader在 IE < 10 中不起作用。
采纳答案by Aivar
If you need it as getting nice effect then you could use flash like they do in https://github.com/mailru/FileAPI
如果您需要它获得不错的效果，那么您可以像在https://github.com/mailru/FileAPI 中那样使用 flash
But when i needed to show image to user because i needed to let user select area for croping then i used form inside hidden iframe and uploaded image to server and sent back image data uri so i was able to get data uri and replace image src attribute, then when area was selected i did not send image back as file but as data uri. In old browsers it means you upload image twice, but i did not want to use flash as in some cases flash may also not be installed there.
但是当我需要向用户显示图像时，因为我需要让用户选择区域进行裁剪，然后我在隐藏的 iframe 中使用表单并将图像上传到服务器并发送回图像数据 uri，因此我能够获取数据 uri 并替换图像 src 属性, then when area was selected i did not send image back as file but as data uri. 在旧浏览器中，这意味着您上传图像两次，但我不想使用 Flash，因为在某些情况下 Flash 也可能没有安装在那里。
回答by Abhilash Cherukat
Instead of
代替
$("img").prop("src", target.result);
write
写
$("#ImageId").attr("src", target.result);
Where ImageIdis the ID of your img tag.
ImageId你的 img 标签的 ID在哪里。
