JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析
本文實例講述了JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法。分享給大家供大家參考,具體如下:
在web開發(fā)中,上傳文件功能通過type為file的input標簽即可實現(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 style="position: relative;"> <!--設(shè)置input的position為absolute,使其不按文檔流排版,并設(shè)置其包裹整個布局 --> <!-- 設(shè)置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>
效果如下:
圖片上傳
這樣,自定義按鈕效果就完成了。但是,這樣還不能把圖片顯示出來。要實現(xiàn)顯示上傳圖片功能,可以通過以下方法實現(xiàn):
- FileReader將文件轉(zhuǎn)Base64顯示。FileReader能夠異步讀取文件,并將文件轉(zhuǎn)化為可讀取的編碼。我們可以通過input獲取上傳圖片的file實例。我們可以通過FileReader將file實例轉(zhuǎn)化為Base64,然后通過img標簽加載圖片的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" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, 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/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 style="position: relative;"> <!--設(shè)置input的position為absolute,使其不按文檔流排版,并設(shè)置其包裹整個布局 --> <!-- 設(shè)置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" 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>
最終顯示效果如圖:
多圖上傳
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- vue 使用微信jssdk,調(diào)用微信相冊上傳圖片功能
- javascript實現(xiàn)移動端上傳圖片功能
- javascript實現(xiàn)移動端 HTML5 圖片上傳預覽和壓縮功能示例
- Vue + Node.js + MongoDB圖片上傳組件實現(xiàn)圖片預覽和刪除功能詳解
- 通過js實現(xiàn)壓縮圖片上傳功能
- js實現(xiàn)上傳圖片并顯示圖片名稱
- JS實現(xiàn)壓縮上傳圖片base64長度功能
- JS+html5實現(xiàn)異步上傳圖片顯示上傳文件進度條功能示例
- Nodejs實現(xiàn)圖片上傳、壓縮預覽、定時刪除功能
- JavaScript實現(xiàn)圖片上傳并預覽并提交ajax
- Js實現(xiàn)粘貼上傳圖片的原理及示例
相關(guān)文章
js實現(xiàn)全國省份城市級聯(lián)下拉菜單效果代碼
這篇文章主要介紹了js實現(xiàn)全國省份城市級聯(lián)下拉菜單效果代碼,通過JavaScript針對數(shù)組的定義與元素的遍歷實現(xiàn)省市級聯(lián)菜單功能,非常具有實用價值,需要的朋友可以參考下2015-09-09JS為什么說async/await是generator的語法糖詳解
這篇文章主要給大家介紹了關(guān)于JS為什么說async/await是generator的語法糖的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用JS具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-07-07js,jquery滾動/跳轉(zhuǎn)頁面到指定位置的實現(xiàn)思路
這篇文章主要介紹了如何通過js或jquery滾動/跳轉(zhuǎn)頁面到指定位置,需要的朋友可以參考下2014-06-06