圖片實時預覽功能

<input type="file" id='file'>
<div>
     <img src="" alt="" id='preview'>
</div>

<script>
        let file = document.querySelector('#file');
        let preview = document.querySelector('#preview');
        file.onchange = function(){
            // 使用FileReader 讀取本地文件
            // 創建文件讀取對象
            const fr = new FileReader();
            // 得到用戶選取的是那個文件
            const one = this.files[0];
            // 讀取文件
            fr.readAsDataURL(one);
            // 當文件讀取完成觸發onload事件，就可以實現預覽
            fr.onload = function(){
                preview.src = fr.result;
            }
        }
    
    </script>