JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現(xiàn)代碼
更新時間：2017年08月25日 09:01:00 作者：小城依舊
這篇文章主要介紹了JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現(xiàn)代碼,需要的朋友可以參考下
簡單說下原理，把顯示的圖片的<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 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>
總結(jié)
以上所述是小編給大家介紹的JS點擊圖片彈出文件選擇框并覆蓋原圖功能的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
基于JavaScript的數(shù)據(jù)結(jié)構(gòu)隊列動畫實現(xiàn)示例解析
這篇文章主要介紹了基于JavaScript的數(shù)據(jù)結(jié)構(gòu)隊列動畫實現(xiàn)示例解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
D3.js實現(xiàn)簡潔實用的動態(tài)儀表盤的示例
本篇文章主要介紹了D3.js實現(xiàn)簡潔實用的動態(tài)儀表盤的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
JS將滑動門改為選項卡（需鼠標(biāo)點擊）的實現(xiàn)方法
這篇文章主要介紹了JS將滑動門改為選項卡（需鼠標(biāo)點擊）的實現(xiàn)方法,涉及JavaScript頁面元素遍歷及樣式替換的相關(guān)技巧,再通過onmouseover與onclick即可分別實現(xiàn)滑動門與選項卡兩種效果,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript 中的 new、bind、call、apply 實際這些都離不開 this，因此本文將著重討論 this，在此過程中分別講解其他相關(guān)知識點。2020-09-09
在B/S開發(fā)中經(jīng)常用到的JavaScript技術(shù)
javascript運用中，經(jīng)常用到的代碼，建議每段代碼都要看下，注意本文有三頁，仔細(xì)看玩，逐個研究透徹，那么網(wǎng)頁中常見的問題，你也就熟悉掌握了2008-05-05
JS獲取select-option-text_value的方法
這篇文章主要介紹了JS獲取select-option-text_value的方法，有需要的朋友可以參考一下2013-12-12
最近很多平臺都上線了顯示用戶的位置信息的功能，那么這是如何做到的， 據(jù)說這個位置信息的準(zhǔn)確性在通信網(wǎng)絡(luò)運營商那里？本文將來探究一下2022-05-05
修改layui的后臺模板的左側(cè)導(dǎo)航欄可以伸縮的方法
今天小編就為大家分享一篇修改layui的后臺模板的左側(cè)導(dǎo)航欄可以伸縮的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
如果說道實現(xiàn)深拷貝最簡單的方法，我們第一個想到的就是?JSON.stringify()?方法，因為JSON.stringify()后返回的是字符串，所以我們會再使用JSON.parse()轉(zhuǎn)換為對象,這篇文章主要介紹了JavaScript?深拷貝的循環(huán)引用問題,需要的朋友可以參考下2022-12-12