快捷導(dǎo)航

JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼

更新時(shí)間：2017年08月25日 09:01:00 作者：小城依舊

這篇文章主要介紹了JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下

簡(jiǎn)單說(shuō)下原理，把顯示的圖片的<img>標(biāo)簽和上傳文件的 <input> 標(biāo)簽放在同一個(gè)div下，設(shè)置<img>的大小和<input>的大小一樣，<input> 設(shè)置透明度為0，用定位和設(shè)置優(yōu)先級(jí)把input浮動(dòng)在<img>上方，這樣點(diǎn)擊圖片就能選擇上傳圖片，選擇完圖片后獲取圖片地址，替換掉原來(lái)的默認(rèn)圖片就能實(shí)現(xiàn)覆蓋原圖功能。

js代碼：

<script type="text/javascript" src="jquery1.8.3.min.js"></script> 
<script type="text/javascript"> 
 $(function() {   
  //建立一個(gè)可存取到該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; 
  } 
  //獲取點(diǎn)擊的圖片元素 
  var cdimg = $('.fileImgs1').children('img'); 
  //獲取上傳圖片的 input 標(biāo)簽元素 
  var cdfile = $('.fileImgs1').children('input[type="file"]'); 
  //設(shè)置input 大小和圖片一致 
  cdfile.css({'width':cdimg.css('width'),'height':cdimg.css('height')}); 
  //input透明度為0,定位，優(yōu)先級(jí)比圖片高 
  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調(diào)用代碼：

<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>

總結(jié)

以上所述是小編給大家介紹的JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: