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

衡木

于 2018-11-12 14:30:07 发布

阅读量8.2k

点赞数 8

分类专栏：前端文章标签： input file

本文链接：https://blog.youkuaiyun.com/qq_37581282/article/details/83991515

版权

前端专栏收录该内容

8 篇文章

订阅专栏

前言

我最近在做自己个人博客的时候，遇到一个前端的问题，就是如何实时预览 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);
     }
  }