点击图片弹出文件选择框并覆盖原图功能

2024年5月31日 139次阅读 来源: 小城依旧

简单说下原理，把显示的图片的<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>
 <div class='fileImgs1'>
		<input type="file" name='img4'>
		<img src="getu1.png" style='width:145px;height:125px' alt="">
	</div>
</body>

    原文作者：小城依旧
    原文地址: https://blog.csdn.net/u014558009/article/details/77541184
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞