JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),平原企業(yè)網(wǎng)站建設(shè),平原品牌網(wǎng)站建設(shè),網(wǎng)站定制,平原網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,平原網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文題目：JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼-創(chuàng)新互聯(lián)
瀏覽路徑：http://muchs.cn/article18/dcpogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站