脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 弹出文件选择框并覆盖原图

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

 更新时间：2017年08月25日 09:01:00   作者：小城依旧  
这篇文章主要介绍了JS点击图片弹出文件选择框并覆盖原图功能的实现代码,需要的朋友可以参考下

简单说下原理，把显示的图片的<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的数据结构队列动画实现示例解析

    这篇文章主要介绍了基于JavaScript的数据结构队列动画实现示例解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • D3.js实现简洁实用的动态仪表盘的示例

    D3.js实现简洁实用的动态仪表盘的示例

    本篇文章主要介绍了D3.js实现简洁实用的动态仪表盘的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • JS将滑动门改为选项卡（需鼠标点击）的实现方法

    JS将滑动门改为选项卡（需鼠标点击）的实现方法

    这篇文章主要介绍了JS将滑动门改为选项卡（需鼠标点击）的实现方法,涉及JavaScript页面元素遍历及样式替换的相关技巧,再通过onmouseover与onclick即可分别实现滑动门与选项卡两种效果,需要的朋友可以参考下
    2015-09-09
  • javascript实现简单倒计时效果

    javascript实现简单倒计时效果

    这篇文章主要为大家详细介绍了javascript实现倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 详解JavaScript的this指向和绑定

    详解JavaScript的this指向和绑定

    JavaScript 中的 new、bind、call、apply 实际这些都离不开 this，因此本文将着重讨论 this，在此过程中分别讲解其他相关知识点。
    2020-09-09
  • 在B/S开发中经常用到的JavaScript技术

    在B/S开发中经常用到的JavaScript技术

    javascript运用中，经常用到的代码，建议每段代码都要看下，注意本文有三页，仔细看玩，逐个研究透彻，那么网页中常见的问题，你也就熟悉掌握了
    2008-05-05
  • JS获取select-option-text_value的方法

    JS获取select-option-text_value的方法

    这篇文章主要介绍了JS获取select-option-text_value的方法，有需要的朋友可以参考一下
    2013-12-12
  • 利用JavaScript获取用户IP属地方法详解

    利用JavaScript获取用户IP属地方法详解

    最近很多平台都上线了显示用户的位置信息的功能，那么这是如何做到的， 据说这个位置信息的准确性在通信网络运营商那里？本文将来探究一下
    2022-05-05
  • 修改layui的后台模板的左侧导航栏可以伸缩的方法

    修改layui的后台模板的左侧导航栏可以伸缩的方法

    今天小编就为大家分享一篇修改layui的后台模板的左侧导航栏可以伸缩的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript 深拷贝的循环引用问题详解

    JavaScript 深拷贝的循环引用问题详解

    如果说道实现深拷贝最简单的方法，我们第一个想到的就是 JSON.stringify() 方法，因为JSON.stringify()后返回的是字符串，所以我们会再使用JSON.parse()转换为对象,这篇文章主要介绍了JavaScript 深拷贝的循环引用问题,需要的朋友可以参考下
    2022-12-12

最新评论