html5提供了FileReader API，允许网页在不经过服务器的情况下，直接读取用户本地选择的文件内容或属性，这一特性大幅提升了前端处理本地文件的能力，常用于文件上传预览、本地文件解析等场景。
FileReader API基础介绍
FileReader是html5新增的API，用于异步读取用户通过<input type="file">标签选择的文件内容，或者获取文件的基础属性。它不会直接操作文件系统，仅能读取用户主动授权的文件，保障了用户本地文件的安全性。
使用FileReader之前，首先需要获取用户选择的文件对象，文件对象通常来自<input>元素的files属性，该属性返回一个FileList对象，里面包含了用户选择的所有文件。
FileReader的核心读取方法
FileReader提供了多种读取文件的方法，不同方法对应不同的读取结果类型，开发者可以根据需求选择合适的方法：
- readAsText(file, encoding)：以文本形式读取文件，encoding可选，默认是UTF-8，适合读取txt、csv等文本类文件。
- readAsDataURL(file)：将文件读取为Data URL格式的字符串，适合读取图片、视频等媒体文件，可直接作为src属性的值实现预览。
- readAsBinaryString(file)：以二进制字符串形式读取文件，目前使用场景较少，部分浏览器已不推荐使用。
- readAsArrayBuffer(file)：将文件读取为ArrayBuffer对象，适合处理二进制数据，比如解析文件二进制结构。
FileReader的事件监听
FileReader的读取过程是异步的，需要通过监听对应的事件来获取读取结果或者处理异常情况：
- onload：文件读取成功完成时触发，读取结果保存在result属性中。
- onerror：文件读取过程中发生错误时触发，错误信息保存在error属性中。
- onprogress：文件读取过程中触发，可用于实现读取进度条功能。
- onabort：读取操作被中断时触发。
完整代码示例
下面是一个完整的示例，实现选择文本文件后读取内容并显示，同时读取图片文件后预览的功能：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FileReader读取文件示例</title>
</head>
<body>
<!-- 文件选择输入框 -->
<input type="file" id="fileInput" accept=".txt,.jpg,.png">
<div>
<h3>文本内容：</h3>
<pre id="textContent"></pre>
</div>
<div>
<h3>图片预览：</h3>
<img id="imgPreview" style="max-width: 300px;">
</div>
<script>
// 获取文件输入框元素
const fileInput = document.getElementById('fileInput');
// 获取展示文本内容的元素
const textContent = document.getElementById('textContent');
// 获取图片预览元素
const imgPreview = document.getElementById('imgPreview');
// 监听文件选择变化事件
fileInput.addEventListener('change', function() {
// 获取用户选择的第一个文件
const file = this.files[0];
// 如果没有选择文件，直接返回
if (!file) {
return;
}
// 创建FileReader实例
const reader = new FileReader();
// 监听读取成功事件
reader.onload = function(e) {
// 获取读取结果
const result = e.target.result;
// 判断文件类型，处理不同逻辑
if (file.type.startsWith('text/')) {
// 文本文件，展示文本内容
textContent.textContent = result;
} else if (file.type.startsWith('image/')) {
// 图片文件，设置预览地址
imgPreview.src = result;
}
};
// 监听读取错误事件
reader.onerror = function() {
console.error('文件读取失败：', reader.error);
alert('文件读取失败，请重试');
};
// 根据文件类型选择读取方式
if (file.type.startsWith('text/')) {
// 文本文件用readAsText读取
reader.readAsText(file, 'UTF-8');
} else if (file.type.startsWith('image/')) {
// 图片文件用readAsDataURL读取
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
读取文件属性的方法
除了读取文件内容，FileReader本身不直接提供文件属性读取能力，但是文件对象（File对象）本身就包含了很多基础属性，可以直接获取：
| 属性名 | 说明 |
|---|---|
| name | 文件名，不包含路径 |
| size | 文件大小，单位是字节 |
| type | 文件的MIME类型，比如text/plain、image/png |
| lastModified | 文件最后修改时间的时间戳 |
| lastModifiedDate | 文件最后修改时间的Date对象，部分浏览器已废弃 |
获取文件属性的示例代码如下：
// 获取文件对象后，直接访问属性
const file = document.getElementById('fileInput').files[0];
if (file) {
console.log('文件名：', file.name);
console.log('文件大小：', file.size, '字节');
console.log('文件类型：', file.type);
console.log('最后修改时间：', new Date(file.lastModified).toLocaleString());
}
注意事项
- FileReader只能读取用户主动选择的文件，无法通过代码直接访问用户本地任意路径的文件，避免安全风险。
- 读取大文件时建议使用onprogress事件实现进度提示，提升用户体验。
- 如果不需要继续读取，可以调用reader.abort()方法中断读取操作。
- 不同浏览器对FileReader的支持程度略有差异，旧版本浏览器可能需要做兼容性处理。
FileReader_APIhtml5本地文件读取文件内容读取修改时间：2026-07-14 12:24:38