在web前端开发中，javascript操作本地文件的能力主要依赖File API实现，它允许网页在用户授权的前提下访问用户选择的文件，完成读取、预览等操作，不需要依赖后端即可实现部分文件处理逻辑。
File API核心组成
File API主要包含几个核心的接口和对象，理解这些基础概念是使用的第一步：
- File对象：代表用户选中的单个文件，包含文件名、大小、类型、最后修改时间等基础属性，继承自Blob对象。
- FileList对象：是File对象的集合，通常来自<input type="file">元素的files属性，用户选择多个文件时会返回该对象。
- Blob对象：表示不可变的原始二进制数据，File对象就是Blob的子类，很多文件读取方法都基于Blob实现。
- FileReader对象：用于读取File或Blob对象的内容，提供了多种读取方式，比如读取为文本、DataURL、二进制字符串等。
获取用户选择的文件
最常见的触发文件选择的方式是使用<input type="file">元素，用户选择文件后，我们可以通过该元素的files属性拿到对应的FileList对象，进而获取具体的File对象。
以下是一个简单的文件选择示例，支持单选和多选：
<!-- 单选文件 -->
<input type="file" id="singleFile">
<!-- 多选文件，添加multiple属性 -->
<input type="file" id="multiFile" multiple>
<script>
// 获取单选文件的元素
const singleInput = document.getElementById('singleFile');
singleInput.addEventListener('change', function() {
// files是FileList对象，单选时取第一个元素即可
const file = this.files[0];
if (file) {
console.log('文件名：', file.name);
console.log('文件大小：', file.size, '字节');
console.log('文件类型：', file.type);
}
});
// 获取多选文件的元素
const multiInput = document.getElementById('multiFile');
multiInput.addEventListener('change', function() {
const fileList = this.files;
console.log('选中的文件数量：', fileList.length);
// 遍历FileList获取每个文件
for (let i = 0; i < fileList.length; i++) {
const file = fileList[i];
console.log(`第${i+1}个文件：${file.name}`);
}
});
</script>
使用FileReader读取文件内容
拿到File对象之后，需要使用FileReader来读取文件的具体内容，FileReader提供了多个读取方法，对应不同的读取结果格式：
| 方法 | 说明 | 适用场景 |
|---|---|---|
| readAsText(file, encoding) | 将文件读取为文本字符串，encoding默认是UTF-8 | 读取txt、json、js等文本类文件 |
| readAsDataURL(file) | 将文件读取为DataURL格式的字符串，本质是base64编码的文件数据 | 图片预览、小文件上传 |
| readAsBinaryString(file) | 将文件读取为二进制字符串 | 部分旧版接口的文件上传场景 |
| readAsArrayBuffer(file) | 将文件读取为ArrayBuffer对象 | 处理二进制数据，比如音视频、大型文件分片 |
FileReader读取文件是异步过程，需要通过监听对应的事件来获取读取结果：
- onload：文件读取成功完成时触发，结果存在result属性中。
- onerror：文件读取失败时触发。
- onprogress：文件读取过程中触发，可以用来做读取进度条。
读取文本文件示例
以下示例实现读取用户选择的txt文件内容并显示在页面上：
const textInput = document.getElementById('textFile');
const textContent = document.getElementById('textContent');
textInput.addEventListener('change', function() {
const file = this.files[0];
if (!file) return;
const reader = new FileReader();
// 读取为文本
reader.readAsText(file, 'UTF-8');
// 读取成功回调
reader.onload = function() {
textContent.textContent = reader.result;
};
// 读取失败回调
reader.onerror = function() {
console.error('文件读取失败：', reader.error);
};
});
图片预览示例
使用readAsDataURL可以实现选择图片后直接在前端预览，不需要上传到后端：
const imgInput = document.getElementById('imgFile');
const previewImg = document.getElementById('previewImg');
imgInput.addEventListener('change', function() {
const file = this.files[0];
// 简单校验是否为图片类型
if (!file.type.startsWith('image/')) {
alert('请选择图片文件');
return;
}
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
previewImg.src = reader.result;
};
});
基于Blob处理文件数据
因为File继承自Blob，所以很多Blob的方法也可以用在File对象上，比如可以通过Blob的slice方法对大文件进行分片，实现大文件分片上传的功能：
function splitFile(file, chunkSize = 1024 * 1024) {
const chunks = [];
let start = 0;
// 循环分片
while (start < file.size) {
const end = Math.min(start + chunkSize, file.size);
// slice方法返回一个新的Blob对象，包含原文件的指定片段
const chunk = file.slice(start, end);
chunks.push(chunk);
start = end;
}
return chunks;
}
// 使用示例
const bigFileInput = document.getElementById('bigFile');
bigFileInput.addEventListener('change', function() {
const file = this.files[0];
if (!file) return;
const chunks = splitFile(file, 2 * 1024 * 1024); // 分片大小2MB
console.log(`文件总大小：${file.size}字节，分成了${chunks.length}片`);
});
注意事项
- File API只能在用户主动操作（比如点击选择文件）的上下文中使用，不能在页面加载时自动读取用户文件，这是浏览器的安全限制。
- 读取大文件时建议使用readAsArrayBuffer或者分片读取，避免一次性读取占用过多内存。
- 如果需要上传文件到后端，除了使用FormData包裹File对象之外，也可以将DataURL或者ArrayBuffer转换为对应的格式再传输。
- 不同浏览器对File API的支持程度略有差异，如果需要兼容旧版浏览器，建议提前做特性检测。
File API是前端处理文件的基础能力，掌握它的基本用法可以覆盖大部分前端文件操作的需求，复杂场景可以结合其他API比如Streams API实现更高效的文件处理。
File_APIjavascript文件操作Blob修改时间：2026-07-18 23:21:38