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自行百度谷歌。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM