JS+HTML實現自定義上傳圖片按鈕並顯示圖片功能的方法分析
阿新 • • 發佈：2020-02-14
本文例項講述了JS+HTML實現自定義上傳圖片按鈕並顯示圖片功能的方法。分享給大家供大家參考，具體如下：
在web開發中，上傳檔案功能通過type為file的input標籤即可實現。但input的顯示效果僅為一個按鈕，且不能修改UI。如果要實現自定義上傳按鈕，一般需要設定input為不可見，然後將input與自定義介面放在同一個div中，並將input鋪在介面上方:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片上傳</title>
</head>
<body>
<!-- 要將父佈局的position設定為relative，父佈局將無法包裹input -->
<div style="position: relative;">
<!--設定input的position為absolute，使其不按文件流排版，並設定其包裹整個佈局 -->
<!-- 設定opactity為0，使input變透明 -->
<!-- 只接受jpg，gif和png格式 -->
<input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif,image/jpg,image/png" />
<!-- 自定義按鈕效果 -->
<div style="text-align: top">
<span style="font-size: 12px;">上傳檔案：</span>
<img id="upload" src="./upload.png" style="width: 40px; height: 40px; vertical-align: middle;" />
</div>
</div>
</body>
</html>
效果如下：
圖片上傳
這樣，自定義按鈕效果就完成了。但是，這樣還不能把圖片顯示出來。要實現顯示上傳圖片功能，可以通過以下方法實現:
- FileReader將檔案轉Base64顯示。FileReader能夠非同步讀取檔案，並將檔案轉化為可讀取的編碼。我們可以通過input獲取上傳圖片的file例項。我們可以通過FileReader將file例項轉化為Base64，然後通過img標籤載入圖片的Base64編碼。
<script type="text/javascript">
function showImg(input) {
var file = input.files[0];
var reader = new FileReader()
// 圖片讀取成功回撥函式
reader.onload = function(e) {
document.getElementById('upload').src=e.target.result
}
reader.readAsDataURL(file)
}
</script>
- 通過window.URL.createObjectURL建立url。通過該方法可以為file例項建立一個臨時的url，img可以通過該url將圖片加載出來。由於是臨時的url，因此同一個file例項，每次建立的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" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif,image/png" onchange="showImg(this)"/>
顯示效果如下:
顯示上傳的圖片
上述程式碼中，點選input標籤時，一次性只能選擇一張圖片，如果要選擇多張圖片，則要給input新增multiple屬性：
<input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif,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設定為relative，父佈局將無法包裹input -->
<div style="position: relative;">
<!--設定input的position為absolute，使其不按文件流排版，並設定其包裹整個佈局 -->
<!-- 設定opactity為0，使input變透明 -->
<!-- 只接受jpg，gif和png格式 -->
<input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif,image/png" onchange="showImg(this)" multiple />
<!-- 自定義按鈕效果 -->
<div style="text-align: top">
<span style="font-size: 12px;">上傳檔案：</span>
<img id="upload" src="./upload.png" style="width: 40px; height: 40px; vertical-align: middle;" />
</div>
</div>
<div id="imgContainer" style="margin-top: 10px;"></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>
最終顯示效果如圖:
多圖上傳
更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧彙總》、《JavaScript動畫特效與技巧彙總》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。