当前位置：文江博客话题详情

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

发布于 2024-10-07 11:09:56 字数 103 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

通知家属抬走 2024-10-14 11:09:57

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

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

其他浏览器只提供一个文件名 - 您在这里没有任何可显示的内容。

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

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

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

更多信息：

回复收藏 0 原文

徒留西风 2024-10-14 11:09:57

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

<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);
  });
});

you can use this fiddle
http://jsfiddle.net/Kulgar/57F67/

回复收藏 0 原文

~没有更多了~