首页 > Web开发 > 详细

flie文件上传图片预览

时间:2018-07-04 17:21:16      阅读:165      评论:0      收藏:0      [点我收藏+]

html代码如下

<div class="col-sm-10">
     <input type="file" class="form-control shenfen" >
     <img class="shenfen_img" width="200" src="">
 </div>

jq代码如下

<script>
      $(function(){
            $(".shenfen").on(‘change‘, function () {
                  if (typeof (FileReader) != "undefined") {
                          var img = $(this).siblings(".shenfen_img");
                          var reader = new FileReader();
                          reader.onload = function (e) {
                                img.attr("src",e.target.result)
                          }
                           reader.readAsDataURL($(this)[0].files[0]);
                   } else {
                           alert("你的浏览器不支持FileReader.");
                   }
             });
       })
</script> 

预览效果如下:

技术分享图片

flie文件上传图片预览

原文:https://www.cnblogs.com/xiaokele1314/p/9264141.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!