刚开始接触到这种图片预览问题的时候，一直认为需要后端的协助，把文件临时保存下来，然后再提供资源，但是这种方式过于复杂，后来有一天就突然想到可以使用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>