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

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

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 標(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)先級比圖片高 
  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小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

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

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

廣告

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