【前端解决方案】input file 上传图片，并实现实时预览

前言

我最近在做自己个人博客的时候，遇到一个前端的问题，就是如何实时预览 input 标签上传的图片。一般的 <input type="file’ /> 标签是不能实现实时预览的。

---

解决方案

可以通过 file 标签和 js 的 FileReader 接口来实现。

• 把选择的图片文件调用 readAsDataURL 方法
• 把图片数据转成 base64 字符串形式显示在页面上

html 代码：

 <div class="am-form-group am-form-file">
      <div class="tpl-form-file-img">
           <img id="backimg" src="/static/admin/assets/img/code.png" class="am-img-responsive" alt="">
      </div>
      <input id="doc-form-file" type="file" multiple="" onchange="reads(this)">
</div>

javascript 代码：

  function reads(obj) {
     var file = obj.files[0];
     var reader = new  FileReader();
     reader.readAsDataURL(file);
     reader.onload = function (ev) {
         $("#backimg").attr("src", ev.target.result);
     }
  }

---

效果图