JS点击图片弹出文件选择框并覆盖原图功能的实现代码


Posted in Javascript onAugust 25, 2017

简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能。

js代码:

<script type="text/javascript" src="jquery1.8.3.min.js"></script> 
<script type="text/javascript"> 
 $(function() {   
  //建立一??可存取到?file的url 
  function getObjectURL(file) { 
   var url = null; 
   if (window.createObjectURL != undefined) { // basic 
    url = window.createObjectURL(file); 
   } else if (window.URL != undefined) { // mozilla(firefox) 
    url = window.URL.createObjectURL(file); 
   } else if (window.webkitURL != undefined) { // webkit or chrome 
    url = window.webkitURL.createObjectURL(file); 
   } 
   return url; 
  } 
  //获取点击的图片元素 
  var cdimg = $('.fileImgs1').children('img'); 
  //获取上传图片的 input 标签元素 
  var cdfile = $('.fileImgs1').children('input[type="file"]'); 
  //设置input 大小和图片一致 
  cdfile.css({'width':cdimg.css('width'),'height':cdimg.css('height')}); 
  //input透明度为0,定位,优先级比图片高 
  cdfile.css({'opacity':0,'position':'absolute','z-index':10}); 
  //判断input的图片文件改变则img的图片也替换为input选择的图片 
  cdfile.change(function() { 
    if (this.files && this.files[0]) { 
      var objUrl = getObjectURL(this.files[0]); 
      if (objUrl) { 
        $(this).siblings('img').attr("src", objUrl); 
      } 
    } 
  }); 
 }) 
</script>

HTML调用代码:

<body> 
<span style="white-space:pre"> </span><div class='fileImgs1'> 
    <input type="file" name='img4'> 
    <img src="getu1.png" style='width:145px;height:125px' alt=""> 
  </div> 
</body>

总结

以上所述是小编给大家介绍的JS点击图片弹出文件选择框并覆盖原图功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
vue一步步实现alert功能
Jul 05 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
Vue实现多标签选择器
Nov 28 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
JavaScript数据类型的存储方法详解
Aug 25 #Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 #Javascript
Vue.js实现网格列表布局转换方法
Aug 25 #Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 #Javascript
Angular2 组件交互实例详解
Aug 24 #Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
探究react-native 源码的图片缓存问题
Aug 24 #Javascript
You might like
杏林同学录(二)
2006/10/09 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php中cookie的使用方法
2014/03/29 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
php探针不显示内存解决方法
2019/09/17 PHP
浅析return false的正确使用
2013/11/04 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
js密码强度校验
2015/11/10 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python实现无边框进度条的实例代码
2020/12/30 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
策划总监岗位职责
2014/02/16 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
优秀会计求职信
2014/07/04 职场文书
对照检查剖析材料
2014/09/30 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android