图片实时预览功能

<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>