flie文件上传图片预览

Posted 2020-11-21 xiaokele1314

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> 

预览效果如下：