JS点击图片弹出文件选择框并覆盖原图功能的实现代码
作者：小城依旧 时间：2024-02-26 07:17:33
简单说下原理，把显示的图片的<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点击图片弹出文件选择框并覆盖原图功能的实现代码网站的支持！
来源：http://blog.csdn.net/u014558009/article/details/77541184
标签：js,弹出框
0
投稿猜你喜欢
python操作mysql、excel、pdf的示例
2024-01-14 17:43:27
php+Memcached实现简单留言板功能示例
2023-11-15 09:30:02
django 数据库 get_or_create函数返回值是tuple的问题
2024-01-27 09:47:22
PL/SQL 日期时间类型函数及运算
2009-02-26 10:45:00
ASP的错误代码都有哪些？
2009-10-28 18:15:00
使用javascript控制cookie显示和隐藏背景图
2024-04-23 09:33:26
Python中关于面向对象概念的详细讲解
2022-07-31 08:04:40
SQL 2008的变更数据捕获——跟踪可变部分
2009-03-20 11:47:00
详解vue-router和vue-cli以及组件之间的传值
2024-05-21 10:31:10
python图像常规操作
2022-12-28 18:21:52
Python OpenCV之常用滤波器使用详解
2023-02-07 22:18:25
ASP字符串大写转换成小写 ASP小写转换成大写 ucase lcase
2011-03-31 10:59:00
谈谈图片如何影响转换率
2011-08-10 19:14:08
python 上下文管理器及自定义原理解析
2023-01-24 20:07:55
SQL中自己创建函数 分割字符串
2008-11-20 16:13:00
Python利用VideoCapture读取视频或摄像头并进行保存
2022-12-06 18:26:27
隐藏修改文件时间和文件属性的ASP脚本
2011-03-17 11:15:00
php打包压缩文件之ZipArchive方法用法分析
2024-05-11 09:46:05
Python中map,reduce,filter和sorted函数的使用方法
2023-04-04 14:01:48
在Python的框架中为MySQL实现restful接口的教程
2024-01-13 08:09:54
