溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡單說下原理，把顯示的圖片的<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>
HTML調用代碼：
<body>
<span > </span><div class='fileImgs1'>
<input type="file" name='img4'>
<img src="getu1.png" style='width:145px;height:125px' alt="">
</div>
</body>
總結
以上所述是小編給大家介紹的JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
