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

2024-05-06 16:39:12

字体：大中小

来源：转载

供稿：网友

简单说下原理，把显示的图片的<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'  </div> </body>

总结

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：Nodejs 复制文件/文件夹的方法

下一篇：js求数组中全部数字可拼接出的最大整数示例代码