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

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

js代码：

$(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);

}

}

});

})

HTML调用代码：

总结

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