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点击图片弹出文件选择框并覆盖原图功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js # 弹出选择框 # js弹出框 # JavaScript基于inquirer封装一个控制台文件选择器 # js实现上传文件添加和删除文件选择框 # JS点击某个图标或按钮弹出文件选择框的实现代码 # JS实现一个文件选择组件详解 # 就能 # 小编 # 上传图片 # 放在 # 在此 # 给大家 # 弹出 # 所述 # 给我留言 # 感谢大家 # 上传文件 # 疑问请 # 有任何 # getObjectURL # var # null # function # min # 一個可 # url

返回目录在线咨询

上一篇：如何创建关键词列表以指导内容创作_SEO优化教程
下一篇：如何利用网红营销增加曝光_SEO优化教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求