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 base64编码实现代码
Dec 02 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
JavaScript实现更换背景图片
Oct 18 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
JavaScript 继承的实现
2009/07/09 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
深入探讨前端框架react
2015/12/09 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
js数组去重的hash方法
2016/12/22 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
Python简单的制作图片验证码实例
2017/05/31 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
python可视化实现代码
2019/01/15 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
党员承诺书内容
2014/03/26 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
开场白怎么写
2015/06/01 职场文书
订货会主持词
2015/07/01 职场文书
python如何为list实现find方法
2022/05/30 Python