JS+HTML如何實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能-創(chuàng)新互聯(lián)
這篇文章主要介紹了JS+HTML如何實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
目前
成都創(chuàng)新互聯(lián)公司已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、
雅安服務(wù)器托管、
成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、
內(nèi)黃網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
在web開發(fā)中，上傳文件功能通過type為file的input標簽即可實現(xiàn)。但input的顯示效果僅為一個按鈕，且不能修改UI。如果要實現(xiàn)自定義上傳按鈕，一般需要設(shè)置input為不可見，然后將input與自定義界面放在同一個div中，并將input鋪在界面上方:
圖片上傳
上傳文件：
效果如下：
圖片上傳
這樣，自定義按鈕效果就完成了。但是，這樣還不能把圖片顯示出來。要實現(xiàn)顯示上傳圖片功能，可以通過以下方法實現(xiàn):
FileReader將文件轉(zhuǎn)Base64顯示。FileReader能夠異步讀取文件，并將文件轉(zhuǎn)化為可讀取的編碼。我們可以通過input獲取上傳圖片的file實例。我們可以通過FileReader將file實例轉(zhuǎn)化為Base64，然后通過img標簽加載圖片的Base64編碼。
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)
}
通過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標簽時，一次性只能選擇一張圖片，如果要選擇多張圖片，則要給input添加multiple屬性：
然后通過多個img顯示files里面的圖片即可，代碼如下:
圖片上傳
上傳文件：
重慶分公司
重慶分公司
