您好,登錄后才能下訂單哦!
簡單說下原理,把顯示的圖片的<img>標(biāo)簽 和上傳文件的 <input> 標(biāo)簽放在同一個div下,設(shè)置<img>的大小和<input>的大小一樣,<input> 設(shè)置透明度為0,用定位和設(shè)置優(yōu)先級把input浮動在<img>上方,這樣點擊圖片就能選擇上傳圖片,選擇完圖片后獲取圖片地址,替換掉原來的默認(rèn)圖片就能實現(xiàn)覆蓋原圖功能。
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>
HTML調(diào)用代碼:
<body> <span > </span><div class='fileImgs1'> <input type="file" name='img4'> <img src="getu1.png" style='width:145px;height:125px' alt=""> </div> </body>
總結(jié)
以上所述是小編給大家介紹的JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。