网络编程
位置：首页>> 网络编程>> JavaScript>> JS点击图片弹出文件选择框并覆盖原图功能的实现代码

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

作者：小城依旧　　发布时间：2024-02-26 07:17:33　

标签：js,弹出框

简单说下原理，把显示的图片的<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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com