FileReader API 可异步读取文件内容，支持文本、图片预览、JSON解析等。通过 readAsText、readAsDataURL 等方法结合 onload 事件读取结果，常用于文件上传前预览、配置导入等场景。示例包括：用 readAsDataURL 实现图片预览；用 readAsText 解析 JSON 或文本文件并处理错误；监听 onprogress 事件显示大文件读取进度。需注意文件类型判断、错误处理与内存占用，建议封装复用。
前端处理文件读取时，FileReader API 是一个非常实用的工具，它允许Web应用异步读取用户选择的文件内容。通过它，我们可以预览图片、解析文本文件、读取JSON数据等，而无需将文件上传到服务器。
1. FileReader 基本使用方法
FileReader 提供了多种读取方式，常用的方法包括：
- readAsText(file)：将文件读取为文本字符串
- readAsDataURL(file)：将文件读取为 Data URL（常用于图片预览）
- readAsArrayBuffer(file)：以字节形式读取文件，适合二进制处理
- readAsBinaryString(file)：读取二进制字符串（较少使用）
基本流程是创建 FileReader 实例，监听 onload 事件，在回调中获取结果。
立即学习“Java免费学习笔记（深入）”；
const reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result); // 读取结果在此
};
reader.readAsText(file); // 开始读取
2. 图片预览实现示例
最常见的用途之一是上传前预览图片。结合 input[type=file] 和 readAsDataURL 可快速实现。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').src = e.target.result;
};
reader.readAsDataURL(file);
}
});
这样就能把用户选择的图片显示在页面 img 标签中，提升交互体验。
3. 读取文本或JSON文件内容
你可以让用户上传 .txt 或 .json 文件，并直接在前端解析内容。
reader.onload = function(e) {
try {
const text = e.target.result;
const data = JSON.parse(text);
console.log('解析成功:', data);
} catch (err) {
console.error('文件格式错误', err);
}
};
reader.readAsText(file);
这个方法适用于配置导入、日志查看等场景。
4. 处理大文件与进度反馈
对于较大的文件，可以监听 onprogress 事件来提供加载进度提示。
reader.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`加载进度: ${percent.toFixed(0)}%`);
}
};
虽然 FileReader 是异步的，不会阻塞UI，但对超大文件仍需注意性能和内存占用。
基本上就这些。FileReader API 简单易用，配合 File 对象能实现丰富的本地文件操作功能，是现代前端开发中处理文件读取的核心手段之一。不复杂但容易忽略细节，比如错误处理和类型判断，建议封装成通用函数复用。
