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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
VUE脚手架具体使用方法
May 20 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
零基础php编程好学吗
2019/10/11 PHP
使用PHP开发留言板功能
2019/11/19 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
JS 时间显示效果代码
2009/08/23 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
运动会广播稿80字
2014/01/23 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
技术比武方案
2014/05/19 职场文书
个人授权委托书范文
2014/09/21 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
消防演习感想
2015/08/10 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android