Question

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

 $("#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_611410375587521_371786666_n.jpg'中的图片浏览器显示图片的完整路径为'C：\ fakepath \ 1518290_611410375580021_371786666_n.jpg'但它不是缩略图，而是显示问号。因为它无法在路径中找到物理pic文件，我猜。

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

非常感谢。

Answer 1

试试这个，

$(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作为ul，则在您的li中添加string，

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

Live Demo

Answer 2

要创建上传文件的图片预览，请查看以下链接中的答案：

Preview an image before it is uploaded

这是该链接的公认答案：

Please take a look at the sample JS code below:

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

and the associated HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

DEMO上述代码

如何预览存储在假路径中的图片？

2 个答案: