input标签上传图片怎么获取src;

  1. 大家都知道input标签可以上传文件
    如:
<input type="file"/>

就可以上传文件,当然也可以上传图片,上传的图片的src地址如何取到:

 var reader = new FileReader();
            reader.onload = function(e){
                console.log(e.target.result)
            }
            reader.readAsDataURL(file.files[0]);

e.target.result就是src;其实这个方法就是把你上传的图片转化成base64进行在网络上流通,在控制台可看出

附一个例子:

<div class="demo"><img width="200px">
<input type="file" onchance="demo(this)"/>
</div>
 function demo(file)
  {
    if (file.files && file.files[0])
    {
      var reader = new FileReader();
      reader.onload = function(evt){
        jQuery(".demo img").attr("src",evt.target.result)
        console.log(evt.target.result)
      }
      reader.readAsDataURL(file.files[0]);
    }
    else
    {
      jQuery(".demo img").attr("src",evt.target.result)
    }
  }

如果想要美观也可做个模态框。如果想要更多功能可以用插件fileupload自行百度谷歌。

posted @ 2016-12-21 18:29  小金子V  阅读(10614)  评论(0编辑  收藏  举报