當(dāng)前位置：
首頁(yè) >
input元素选择图片，并转换为base64格式在img标签显示
發(fā)布時(shí)間：2025/4/16
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
input元素选择图片，并转换为base64格式在img标签显示
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
#input元素選擇圖片，并轉(zhuǎn)換為base64格式在img標(biāo)簽顯示
<body><input type="file"><img src="" alt=""><script>var input=document.getElementsByTagName('input')[0];var img=document.getElementsByTagName('img')[0];input.addEventListener('change',function(e){// 將選擇的圖片文件保存在變量filevar file=e.target.files[0];// FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容var reader = new FileReader();reader.readAsDataURL(file);reader.onloadend = function(e) {// 讀取文件完成// e.target.result or this.result 為圖片文件的base64格式img.src=e.target.result;};})</script> </body>總結(jié)
以上是生活随笔為你收集整理的input元素选择图片，并转换为base64格式在img标签显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 使用axios上传文件+参数
- 下一篇： 自己动手写一个nodejs的日志生成器