实现前端点击图片并显示

参考:

【前端解决方案】input file 上传图片,并实现实时预览_fileinput 动态加载预览数据-CSDN博客

 

 

                  <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>

 

 

  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);
    }
  }

 

posted on 2024-04-22 18:24  201812  阅读(37)  评论(0编辑  收藏  举报