【前端解决方案】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);
     }
  }

效果图

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37581282/article/details/83991515
0条评论
添加一条新回复