短視訊app原始碼，實現原生js圖片預覽效果
阿新 • • 發佈：2021-12-14
短視訊app原始碼，實現原生js圖片預覽效果的相關程式碼
實現步驟
監聽input file的 onchange事件
新建FileReader物件fr，並對此fr物件進行onload監聽
fr物件使用readAsDataURL讀取檔案，觸發onload事件
在onload事件獲取檔案base64資訊並使用img src渲染
其他瀏覽器支援情況可檢視caniuse，MDN同樣也有說明支援情況: https://caniuse.com/#search=filereader
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="file" name="file" onchange="onImgFileChanged(this)"> <img id="img" src="" > <script type="text/javascript"> function onImgFileChanged(source) { let fr= new FileReader(); fr.onload = function(e) { console.log(e); document.querySelector('#img').src = e.target.result; } fr.readAsDataURL(source.files[0]); } </script> </body> </html>
以上就是短視訊app原始碼，實現原生js圖片預覽效果的相關程式碼。 更多內容歡迎關注之後的文章