好资源导航 » 文章资讯 » JS点击图片弹出文件选择框并覆盖原图功能的实现代码

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

2023-09-25 21:03:08 59

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

js代码：



$(function(){
//建立一個可存取到該file的url
functiongetObjectURL(file){
varurl=null;
if(window.createObjectURL!=undefined){//basic
url=window.createObjectURL(file);
}elseif(window.URL!=undefined){//mozilla(firefox)
url=window.URL.createObjectURL(file);
}elseif(window.webkitURL!=undefined){//webkitorchrome
url=window.webkitURL.createObjectURL(file);
}
returnurl;
}
//获取点击的图片元素
varcdimg=$('.fileImgs1').children('img');
//获取上传图片的input标签元素
varcdfile=$('.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]){
varobjUrl=getObjectURL(this.files[0]);
if(objUrl){
$(this).siblings('img').attr("src",objUrl);
}
}
});
})

HTML调用代码：

总结

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐