JS点击图片弹出文件选择框并覆盖原图功能的实现代码
程序员文章站
2022-04-29 08:12:50
简单说下原理，把显示的图片的![]()
标签 和上传文件的 标签放在同一个div下，设置![]()
的大小和
简单说下原理，把显示的图片的<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点击图片弹出文件选择框并覆盖原图功能的实现代码，希望对大家有所帮助