如何预览存储在假路径中的图片？ [英] How to preview picture stored in the fake path?

问题描述

我正在上传表格。这是jquery函数：

I am making an upload form. Here is the jquery function:

 $("#dropbrows").click(function(){
  $("#browse").trigger("click");
      $("#browse").change(function (){

  var test = $("#browse").val();

  $("#userpic").append("<a>'"+test+"'</a><img src='"+test+"' width='30' height='30' />");


});
   });

和HTML

        <ul id="userpic" class="userpic">

            <!-- The file uploads will be shown here -->
        </ul>

正如你所看到的，我想做的是在图片选择上制作一个小缩略图，图片存储在'C：\fakepath \ 1518290_611410375580021_371786666_n.jpg'中的浏览器将图片的完整路径显示为'C：\fakepath \ 1518290_61141037558750021_371786666_n.jpg'，但不是缩略图，而是显示问号。因为它无法在路径中找到物理pic文件，我猜。

As you see what am I trying to do is to make a small thumbnail upon picture select, the pic stored in 'C:\fakepath\1518290_611410375580021_371786666_n.jpg' the browser shows the full path of the pic as 'C:\fakepath\1518290_611410375580021_371786666_n.jpg' but instead of the thumbnail it shows a question mark. cause it is not able to find the physical pic file in the path, I guess.

问题是，如何让缩略图显示图片？我在这里做错了什么？

The question is, how to let the thumbnail show the pic? What am I doing wrong here?

非常感谢。

推荐答案

试试这个，

$(function(){
    $("#browse").change(function () {
       var files = this.files;
       var reader = new FileReader();
       var name=this.value;
       reader.onload = function (e) {
          $("#userpic").append("<a>'"+name+"'</a><img src='"+e.target.result+"' width='30' height='30' />");
       };
       reader.readAsDataURL(files[0]);
    });
});

如果您使用的是 userpic as ul 然后在字符串中附加 li 喜欢，

Also if you are using userpic as ul then append li in your string like,

$("#userpic").append("<li>anchor and image here</li>");

现场演示

这篇关于如何预览存储在假路径中的图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！