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

來源：懂視網責編：小采時間：2020-11-27 22:31:38

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

JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現代碼:簡單說下原理，把顯示的圖片的<img>標簽和上傳文件的 <input> 標簽放在同一個div下，設置<img>的大小和<input>的大小一樣，<input> 設置透明度為0，用定位和設置優(yōu)先級把input浮動在<img>上方，這樣點

推薦度：

點擊下載本文 文檔為doc格式

導讀JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現代碼:簡單說下原理，把顯示的圖片的<img>標簽和上傳文件的 <input> 標簽放在同一個div下，設置<img>的大小和<input>的大小一樣，<input> 設置透明度為0，用定位和設置優(yōu)先級把input浮動在<img>上方，這樣點

簡單說下原理，把顯示的圖片的<img>標簽和上傳文件的 <input> 標簽放在同一個div下，設置<img>的大小和<input>的大小一樣，<input> 設置透明度為0，用定位和設置優(yōu)先級把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,定位，優(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>

HTML調用代碼：

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

總結

以上所述是小編給大家介紹的JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片原圖實現

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦