溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JS+HTML如何實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
在web開發(fā)中，上傳文件功能通過type為file的input標(biāo)簽即可實現(xiàn)。但input的顯示效果僅為一個按鈕，且不能修改UI。如果要實現(xiàn)自定義上傳按鈕，一般需要設(shè)置input為不可見，然后將input與自定義界面放在同一個div中，并將input鋪在界面上方:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片上傳</title> </head> <body> <!-- 要將父布局的position設(shè)置為relative，父布局將無法包裹input --> <div > <!--設(shè)置input的position為absolute，使其不按文檔流排版，并設(shè)置其包裹整個布局 --> <!-- 設(shè)置opactity為0，使input變透明 --> <!-- 只接受jpg，gif和png格式 --> <input id="upload-input" type="file" accept="image/gif, image/jpg, image/png" /> <!-- 自定義按鈕效果 --> <div > <span >上傳文件：</span> <img id="upload" src="./upload.png" /> </div> </div> </body> </html>
效果如下：
圖片上傳
這樣，自定義按鈕效果就完成了。但是，這樣還不能把圖片顯示出來。要實現(xiàn)顯示上傳圖片功能，可以通過以下方法實現(xiàn):
FileReader將文件轉(zhuǎn)Base64顯示。FileReader能夠異步讀取文件，并將文件轉(zhuǎn)化為可讀取的編碼。我們可以通過input獲取上傳圖片的file實例。我們可以通過FileReader將file實例轉(zhuǎn)化為Base64，然后通過img標(biāo)簽加載圖片的Base64編碼。
<script type="text/javascript">
function showImg(input) {
var file = input.files[0];
var reader = new FileReader()
// 圖片讀取成功回調(diào)函數(shù)
reader.onload = function(e) {
document.getElementById('upload').src=e.target.result
}
reader.readAsDataURL(file)
}
</script>通過window.URL.createObjectURL創(chuàng)建url。通過該方法可以為file實例創(chuàng)建一個臨時的url，img可以通過該url將圖片加載出來。由于是臨時的url，因此同一個file實例，每次創(chuàng)建的url都會不一樣:
function showImg(input) {
var file = input.files[0];
var url = window.URL.createObjectURL(file)
document.getElemtById('upload').src=url
}使用上述方法中的其中一種，并將showImg方法掛在input的onchange屬性上，就能夠顯示圖片了:
<input id="upload-input" type="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)"/>
顯示效果如下:
顯示上傳的圖片
上述代碼中，點擊input標(biāo)簽時，一次性只能選擇一張圖片，如果要選擇多張圖片，則要給input添加multiple屬性：
<input id="upload-input" type="file" accept="image/gif, image/jpg, image/png" multiple onchange="showImg(this)"/>
然后通過多個img顯示files里面的圖片即可，代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片上傳</title>
</head>
<body>
<!-- 要將父布局的position設(shè)置為relative，父布局將無法包裹input -->
<div >
<!--設(shè)置input的position為absolute，使其不按文檔流排版，并設(shè)置其包裹整個布局 -->
<!-- 設(shè)置opactity為0，使input變透明 -->
<!-- 只接受jpg，gif和png格式 -->
<input id="upload-input" type="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)" multiple />
<!-- 自定義按鈕效果 -->
<div >
<span >上傳文件：</span>
<img id="upload" src="./upload.png" />
</div>
</div>
<div id="imgContainer" ></div>
</body>
<script type="text/javascript">
function showImg(obj) {
var files = obj.files
// document.getElementById("imgContainer").innerHTML = getImgsByUrl(files)
getImgsByFileReader(document.getElementById("imgContainer"), files)
}
// 使用window.URL.createObjectURL(file)讀取file實例并顯示圖片
function getImgsByUrl(files) {
var elements = ''
for (var i = 0; i < files.length; i++) {
var url = window.URL.createObjectURL(files[i])
elements += "<img src='"+ url + "' style='width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;' />"
}
return elements
}
// 使用FileReader讀取file實例并顯示圖片
function getImgsByFileReader(el, files) {
for (var i = 0; i < files.length; i++) {
let img = document.createElement('img')
img.setAttribute('style', 'width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;')
el.appendChild(img)
var reader = new FileReader()
reader.onload = function(e) {
img.src = e.target.result
}
reader.readAsDataURL(files[i])
}
}
</script>
</html>最終顯示效果如圖:
感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS+HTML如何實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼