图片实时预览功能
<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>