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

最新推荐文章于 2023-07-25 09:26:30 发布

小城依旧

最新推荐文章于 2023-07-25 09:26:30 发布

阅读量3.4k

点赞数 3

分类专栏： JS 文章标签：图片上传图片覆盖原图图片 javascript 点击图片弹出文件选择框

本文链接：https://blog.csdn.net/u014558009/article/details/77541184

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

小城依旧

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
点击图片弹出文件选择框并覆盖原图功能

简单说下原理，把显示图片的img标签和上传文件的 input标签放在同一个div下，input设置的大小和img的大小一样，设置透明度为0，用定位和设置优先级把input浮动在img上方，这样点击图片就能弹出文件选择框，选择完图片后获取图片地址，替换掉原来的默认图片就能实现覆盖原图功能。 $(function() { //建立一個可存取到該file的url function
复制链接

扫一扫