Question

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

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

Answer 1

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

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

其他浏览器只提供文件名 - 您无需在此处显示。

您可以随时使用jQuery（.ajax上传文件，因此页面无法刷新），然后将其显示给用户。在这些现代，上传文件并不令人不安（特别是如果你在工作时提供动画）。

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

如果你仍然希望为提供完整路径的浏览器实现这一点（例如，你在企业环境中工作，并且每个人都使用相同的浏览器，或者你让它优雅地降级，只是向用户提供该功能它工作），你只需使用.val()的{{1}}来获取文件名的路径。之前添加<input type='file'>并显示（在file://左右转储）

更多信息：

Answer 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/

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

2 个答案: