flie文件上传图片预览

使用FileReader预览身份证图片

最新推荐文章于 2020-07-29 03:31:04 发布

weixin_33810006

最新推荐文章于 2020-07-29 03:31:04 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaokele1314/p/9264141.html

本文介绍了一种使用HTML和jQuery实现的实时预览身份证图片的方法。通过FileReader API读取用户上传的文件，并将其转换为Data URL，然后设置为img元素的src属性来显示。

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>