随笔 - 352  文章 - 0  评论 - 5  阅读 - 63698

实现前端点击图片并显示

参考:

【前端解决方案】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   201812  阅读(44)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
历史上的今天:
2023-04-22 layui学习3(静态表格、表单元素)
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示