JavaScript中如何读取文件内容
在前端开发中，经常需要实现文件读取的功能，比如上传文件后预览内容、读取本地文本文件数据等。JavaScript提供了多种读取文件内容的方式，最常用的是基于File API的实现，兼容大部分现代浏览器。
基于File API读取文件
File API是HTML5提供的一组用于处理本地文件的接口，结合<input type="file">标签，可以轻松实现文件选择和内容读取。核心步骤分为三步：选择文件、获取文件对象、使用FileReader读取内容。
1. 基础文件读取示例
下面的代码实现了选择文本文件后读取其内容并显示在页面上的功能：
// 获取文件选择输入框和显示结果的容器
const fileInput = document.getElementById('fileInput');
const resultContainer = document.getElementById('result');
// 监听文件选择变化事件
fileInput.addEventListener('change', function(e) {
// 获取选中的文件列表，这里取第一个文件
const file = e.target.files[0];
// 如果没有选择文件，直接返回
if (!file) {
return;
}
// 创建FileReader实例
const reader = new FileReader();
// 监听读取完成事件
reader.onload = function(event) {
// event.target.result即为读取到的文件内容
resultContainer.textContent = event.target.result;
};
// 监听读取错误事件
reader.onerror = function() {
resultContainer.textContent = '文件读取失败，请重试';
};
// 以文本格式读取文件，也可以传入第二个参数指定编码，默认是utf-8
reader.readAsText(file);
});对应的HTML结构如下，需要注意<input>标签的类型设置为file，用于触发文件选择弹窗：
<input type="file" id="fileInput" accept=".txt,.json,.js"> <div id="result"></div>
上述代码中，<input>标签的accept属性用于限制可选文件的类型，这里只允许选择.txt、.json、.js后缀的文件，减少无效文件的选择。
2. 不同格式的读取方式
FileReader提供了多种读取文件的方法，适应不同的使用场景：
readAsText(file)：将文件读取为文本字符串，适合读取文本内容，比如txt、json、js等文件。readAsDataURL(file)：将文件读取为Data URL，适合预览图片、音频等二进制文件，读取后可以直接赋值给<img>的src属性显示图片。readAsArrayBuffer(file)：将文件读取为ArrayBuffer对象，适合处理二进制数据，比如解析文件二进制内容、处理音视频数据等场景。
下面是读取图片并显示预览的示例：
const imgInput = document.getElementById('imgInput');
const imgPreview = document.getElementById('imgPreview');
imgInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) {
alert('请选择图片文件');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
// 读取到的Data URL直接赋值给img的src
imgPreview.src = event.target.result;
};
// 以Data URL格式读取文件
reader.readAsDataURL(file);
});对应的HTML结构：
<input type="file" id="imgInput" accept="image/*"> <img id="imgPreview" style="max-width: 300px;">
注意事项
使用File API读取文件时需要注意以下几点：
- File API仅支持在用户主动操作（比如点击选择文件）后触发，不能主动读取用户本地文件，避免隐私安全问题。
- 读取大文件时可能会阻塞主线程，建议结合Web Worker处理大文件读取，避免页面卡顿。
- 如果需要支持旧版本浏览器（比如IE10以下），需要做兼容性处理，或者使用polyfill库补充File API的支持。
- 读取到的Data URL体积会比原文件大，不适合用于大文件的预览，大图片预览建议先压缩再处理。
总结
JavaScript读取文件内容最主流的方式是使用File API配合FileReader，根据文件类型选择对应的读取方法即可满足大部分场景需求。如果需要处理更复杂的文件操作，比如大文件分片上传、文件二进制解析等，可以在此基础上扩展逻辑。
JavaScript文件读取File_APIFileReader前端开发 本作品最后修改时间：2026-05-23 23:33:04