網頁中的圖片預覽思路(純前端)

、Edgar發表於2020-10-04
網頁前端

剛開始接觸到這種圖片預覽問題的時候，一直認為需要後端的協助，把檔案臨時儲存下來，然後再提供資源，但是這種方式過於複雜，後來有一天就突然想到可以使用base64編碼形式內容來顯示檔案，其實早就接觸到了base64型別的圖片，但是一直沒有想到?

參考程式碼如下：

<!DOCTYPE html>
<html>

<head>
    <title>image preview demo</title>
</head>

<body>
    <label for="file">file: </label>
    <input id="file" type="file">

    <img id="preview" src="" alt="demo" style="display: none;width: 200px;">
</body>

<script>
    var file = document.getElementById("file")
    var img = document.getElementById("preview")
    file.onchange = (evt) => {
        // 獲取其中的第一個檔案
        if (file.files.length > 0) {
            var reader = new FileReader()
            // reader處理的方式是非同步的，所以要監聽onload事件
            reader.onload = () => {
                img.style.display = "block"
                img.src = reader.result
            }
            // 讀取檔案內容
            // 其中的result欄位就是需要的base64編碼的內容
            reader.readAsDataURL(file.files[0])

        } else {
            img.style.display = "none"
        }
    }
</script>

</html>

相關文章