使用FileReader API实现前端文件预览_javascript技巧
FileReader API可实现前端文件预览，通过readAsDataURL读取图片并显示在img标签中，或用readAsText读取文本内容展示在页面上，结合input的accept和multiple属性支持单或多文件预览，利用onload事件获取结果，根据file.type判断MIME类型选择读取方式，提升兼容性与用户体验。
在现代Web开发中，前端文件预览是一个常见需求，比如上传图片前查看缩略图、读取文本文件内容等。借助 FileReader API，我们可以在不上传文件到服务器的情况下，在浏览器本地完成文件的读取与预览，提升用户体验。
理解 FileReader API
FileReader 是浏览器提供的用于异步读取用户本地文件内容的接口，常配合 input[type="file"] 使用。它支持多种文件格式读取，主要方法包括：
- readAsText(file)：将文件读取为文本字符串
- readAsDataURL(file)：将文件读取为 base64 编码的 Data URL（适合图片预览）
- readAsBinaryString(file)：读取二进制字符串（较少使用）
- readAsArrayBuffer(file)：读取为 ArrayBuffer（适用于音频、视频等复杂文件）
常用事件有 onload、onerror 和 onprogress，其中 onload 在读取成功后触发，result 属性保存结果。
实现图片文件预览
最常见的场景是选择图片后立即预览。通过 readAsDataURL 将图片转为 Data URL，并赋值给 标签的 src 属性即可显示。
@@##@@
注意：accept="image/*" 可限制只选择图片文件，提升用户体验。
预览文本文件内容
除了图片，你也可以读取 .txt、.json 等文本类文件内容并展示在页面上。
readAsText 默认以 UTF-8 编码读取，适用于大多数文本文件。
多文件预览与类型判断
如果需要支持多选文件预览，可以结合 multiple 属性和遍历文件列表实现。同时根据文件类型决定读取方式。
通过 file.type 判断文件 MIME 类型，动态选择读取方式，增强兼容性。
基本上就这些。FileReader API 简单高效，是实现前端文件预览的核心工具。只要注意文件大小限制和错误处理，就能在大多数现代浏览器中稳定运行。
