使用JQuery创建图像的实时预览（在上传之前）

我想在使用JQuery将其上传到服务器之前创建图像预览。

我的代码，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]); } } }; }); 

我的HTML：

见jsfiddle： http ： //jsfiddle.net/aAuMU/

onload之后，我看到了图像的src（使用谷歌控制台应用程序），它看起来像：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsA...

如果我使用IE作为浏览器，这是一种获取javascript图像基础并分配给图像的方法？

FileReader在IE <10中不起作用。

Answer 1

如果您需要它可以获得良好的效果，那么您可以像在https://github.com/mailru/FileAPI中那样使用闪存

但是当我需要向用户显示图像时，因为我需要让用户选择区域进行裁剪，然后我使用隐藏iframe内的表单并将图像上传到服务器并发回图像数据uri，这样我就可以获取数据uri并替换image src属性，然后当选择区域时，我没有将图像作为文件发送回来，而是作为数据uri发送。 在旧浏览器中，它意味着您上传图像两次，但我不想使用闪存，因为在某些情况下，闪存也可能不会安装在那里。

Answer 2

代替

 $("img").prop("src", target.result); 

写

 $("#ImageId").attr("src", target.result); 

其中ImageId是img标记的ID。