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

简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能。

js代码:

<script type="text/javascript" src="https://www.jb51.net/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> </span><div> <input type="file"> <img src="https://www.jb51.net/getu1.png" alt=""> </div> </body>

总结

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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wygssy.html