JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現代碼-創新互聯

簡單說下原理，把顯示的圖片的<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> 

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

本文題目：JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現代碼-創新互聯
瀏覽路徑：http://m.kartarina.com/article18/dcpogp.html

成都網站建設公司_創新互聯，為您提供軟件開發、營銷型網站建設、品牌網站設計、虛擬主機、App設計、網站設計公司

廣告

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