如何在将图像上传到服务器之前显示其预览？

大家好！我是一名前端开发新手，遇到了一个问题。我正在制作一个用户头像上传表单。我希望用户可以通过 `` 选择文件后，立即看到图片的样子，而无需等待发送到服务器。但我没能实现。 以下是我当前的代码： ```html ``` ```javascript const fileInput = document.getElementById('fileInput'); const preview = document.getElementById('preview'); fileInput.addEventListener('change', function() { const file = this.files[0]; // 这里我不知道接下来该怎么做 // 尝试直接赋值路径，但不起作用 preview.src = file; // 不起作用 }); ``` 问题在于 `file` 是一个 File 对象，而不是路径字符串。我听说可以使用 FileReader，但不太明白它是如何工作的。请指教。