短視訊app原始碼，實現原生js圖片預覽效果

zhibo系統開發發表於2021-12-14
APP原始碼JS

短視訊app原始碼，實現原生js圖片預覽效果的相關程式碼

實現步驟

監聽input file的 onchange事件

新建FileReader物件fr，並對此fr物件進行onload監聽

fr物件使用readAsDataURL讀取檔案，觸發onload事件

在onload事件獲取檔案base64資訊並使用img src渲染

其他瀏覽器支援情況可檢視caniuse，MDN同樣也有說明支援情況: 

<!DOCTYPE html>
<html>
<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圖片預覽效果的相關程式碼。 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2847647/，如需轉載，請註明出處，否則將追究法律責任。

相關文章