首页 > 其他分享 >实现前端点击图片并显示

实现前端点击图片并显示

时间:2024-04-22 18:35:28浏览次数:24  
标签:function 前端 点击 file reader var ev 图片

参考:

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

 

标签:function,前端,点击,file,reader,var,ev,图片
From: https://www.cnblogs.com/hmy22466/p/18125077

相关文章

  • 刚交付了智慧园区统一管理平台,前端零代码+后端零代码+物联网平台,完美搭配!(一)
    先看下交付效果,2人3个月完成,涉及120个页面,80来个接口,30多个二级模块。其中负责前端的实施工程师,无需懂任何代码编程。其中界面和功能,基本是严格按照墨刀的产品原型实现的: 记录下这个有意思的过程。我是后端工程师,前端开发懂一点点但也不多,平时开发底层为主,CURD项目业务......
  • 轻松复现一张AI图片
    合集-AIGC(1) 1.轻松复现一张AI图片04-22收起 轻松复现一张AI图片现在有一个非常漂亮的AI图片,你是不是想知道他是怎么生成的?今天我会交给大家三种方法,学会了,什么图都可以手到擒来了。需要的软件在本教程中,我们将使用AUTOMATIC1111stablediffusionWebUI。......
  • 持续性学习-Day15(前端基础CSS3)
    参考教学视频:秦疆1.什么是CSSCascadingStyleSheet层叠样式表CSS3圆角、阴影、动画...浏览器兼容性CSS优势:内容和表现分离网页结构表现统一,可以实现复用样式十分的丰富建议使用独立html的css文件利用SEO,容易被搜索引擎收录2.入门<linkrel="styleshee......
  • 前端如何防止接口重复提交
    什么是接口重复提交?接口重复提交指的是在网络通信中,同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致,例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。接口重复提交可能会导致多种......
  • 通用的后端返回给前端的状态信息Result
    packagecom.duxiang.backgroundmanagement.common;/***返回消息*/publicclassResult{privatestaticfinalStringSUCCESS="0";privatestaticfinalStringERROR="-1";privateStringcode;privateStringmsg;privateObj......
  • 轻松复现一张AI图片
    轻松复现一张AI图片现在有一个非常漂亮的AI图片,你是不是想知道他是怎么生成的?今天我会交给大家三种方法,学会了,什么图都可以手到擒来了。需要的软件在本教程中,我们将使用AUTOMATIC1111stablediffusionWebUI。这是一款流行且免费的软件。您可以在Windows、Mac或GoogleColab......
  • 前端页面渲染(文档+数据)不同模式
    一张可被用户访问的页面,可以被拆分为主文档(html)和数据两个部分,这两个部分既可以是组合在一起的(SSR),也可以是分离的(SPA、异步渲染)。比如一些活动搭建平台,可以增加一个数据网关,实现SSR,提升用户体验。服务端渲染(Server-SideRendering,SSR)服务端渲染是一种在服务器上生成完整......
  • el-upload二次封装实现上传图片校验
    说明项目开发中,常常需要对上传图片做大小、类型、宽高校验实现要点el-upload中定义:before-upload="handleBeforeUpload"事件img.onload为异步事件,需要Promise包裹才能真正实现校验,直接returntrue|false是没用的代码<el-upload:before-update="handleBeforeUpdate":htt......
  • 前端资源共享方案对比-笔记:iframe/JS-SDK/微前端
    vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage但是本文还是详细说一遍:为什么需要异步加载语言包主要还是缩小提代码包,没有按需加载前,语言包内容太多好几屏幕全部是,虽然从webpack-analysis看图里面占比可以忽略不计......
  • 前端定义一个对象的时候,key值如何设置为数字,并抽成常量
    在JavaScript中,如果你想将对象的键值设置为常量数值,首先需要定义这些常量。然后你可以在创建对象时使用这些常量作为键。例如://定义常量constKEY_ONE=1;constKEY_TWO=2;constKEY_THREE=3;//使用常量作为对象的键letmyObject={[KEY_ONE]:'one',[KEY_T......