input元素选择图片,并转换为base64格式在img标签显示
生活随笔
收集整理的這篇文章主要介紹了
input元素选择图片,并转换为base64格式在img标签显示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
#input元素選擇圖片,并轉換為base64格式在img標簽顯示
<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 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件(或原始數據緩沖區)的內容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>總結
以上是生活随笔為你收集整理的input元素选择图片,并转换为base64格式在img标签显示的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 使用axios上传文件+参数
- 下一篇: 关于chorme浏览器无法保存第三方co