显示用户想要在网站上上传的图像文件的预览答案

【问题标题】：Showing a preview of the image file that user wants to upload on the website显示用户想要在网站上上传的图像文件的预览
【发布时间】：2011-05-25 02:56:55
【问题描述】：

我如何显示用户选择在网站上上传的图像的预览。

我的意思是，当用户从他们的系统中选择文件时，让网页已经向他们显示他们想要上传的文件。如何使用 HTML 和 jQuery 做到这一点？

【问题讨论】：

Preview an image before it is uploaded 的可能重复项

标签： jquery html file-upload preview

【解决方案1】：

你不能，至少不是在所有浏览器中。

这是因为某些浏览器提供了到 <input type='file'> 的完整路径 - 这样您就可以尝试在用户硬盘上显示该元素（请注意某些浏览器的安全设置）

其他浏览器只提供一个文件名 - 你在这里没有什么可显示的。

您总是可以做的是使用 jQuery（.ajax，因此页面不会刷新）上传文件，然后已经将其显示给用户。在当今时代，上传文件并没有那么令人不安（尤其是如果您在其工作时提供动画）。

如果您确实需要此功能，您可以随时使用 Java Applet（想想 facebook 或 imageshack）来进行预览。不过，并非每个用户都安装并启用了（足够新的）Java。

如果您仍想为确实提供完整路径的浏览器实现此功能（例如，您在公司环境中工作并且每个人都使用相同的浏览器，或者您让它优雅降级并仅向其用户提供该功能它有效），您只需使用<input type='file'> 的.val() 来获取文件名的路径。在前面添加file:// 并显示（转储到img 左右）

更多信息：

【讨论】：

告诉我他们在任何浏览器中的支持示例！
您阅读过“更多信息”链接吗？他们声明 IE7、FF2 ......许多“旧”浏览器。 bugzilla.mozilla 链接解释了它被更改的原因。

【解决方案2】：

<div class="upload-preview">
  <img />
</div>
<input class="file" name="logo" type="file">



$(document).ready(function(){
var preview = $(".upload-preview img");

$(".file").change(function(event){
   var input = $(event.currentTarget);
   var file = input[0].files[0];
   var reader = new FileReader();
   reader.onload = function(e){
       image_base64 = e.target.result;
       preview.attr("src", image_base64);
   };
   reader.readAsDataURL(file);
  });
});

你可以使用这个小提琴 http://jsfiddle.net/Kulgar/57F67/

【讨论】：