File System Access API是现代浏览器提供的一组接口，允许网页应用在获得用户明确授权后，直接访问用户本地的文件系统，实现文件的读取、写入、创建等操作，无需通过传统的文件上传下载流程中转数据。
File System Access API的基本使用前提
使用该API前需要确认两个核心条件：首先是浏览器支持，目前Chrome、Edge等基于Chromium的浏览器已经完整支持该API，Firefox和Safari还在逐步适配中；其次是必须在安全上下文环境中使用，也就是页面需要通过HTTPS协议访问，或者是在本地localhost、127.0.0.1环境下运行，否则API将无法调用。
打开并读取本地文件
打开文件需要调用window.showOpenFilePicker方法，该方法会弹出系统的文件选择对话框，用户选择文件后返回对应的文件句柄，之后就可以通过句柄读取文件内容。
以下是读取文本文件的完整示例代码：
// 检查浏览器是否支持File System Access API
if ('showOpenFilePicker' in window) {
// 打开文件选择对话框，配置允许选择多个文件，接受文本类型
async function readLocalFile() {
try {
// 获取用户选择的文件句柄数组，这里只取第一个选中的文件
const [fileHandle] = await window.showOpenFilePicker({
multiple: false,
types: [
{
description: '文本文件',
accept: {
'text/plain': ['.txt', '.js', '.html', '.css']
}
}
]
});
// 通过文件句柄获取文件对象
const file = await fileHandle.getFile();
// 读取文件内容为文本
const content = await file.text();
console.log('文件内容：', content);
// 可以在页面上展示内容
document.getElementById('fileContent').innerText = content;
} catch (err) {
// 用户取消选择或者读取失败时的处理
console.error('读取文件失败：', err);
}
}
// 调用读取函数
readLocalFile();
} else {
console.log('当前浏览器不支持File System Access API');
}
写入内容到本地文件
写入文件分为两种场景，一种是修改已有文件，另一种是创建新文件。修改已有文件需要先获取对应的文件句柄，创建新文件则调用window.showSaveFilePicker方法弹出保存对话框，让用户选择保存位置和文件名。
修改已有文件内容
获取到文件句柄后，需要调用createWritable方法创建可写入的流，然后通过流写入内容，最后关闭流完成写入。
async function writeToExistingFile(fileHandle, newContent) {
try {
// 创建可写入流
const writable = await fileHandle.createWritable();
// 写入内容
await writable.write(newContent);
// 关闭流，完成写入
await writable.close();
console.log('文件写入成功');
} catch (err) {
console.error('写入文件失败：', err);
}
}
创建并保存新文件
调用保存对话框的方法可以指定新文件的默认名称、后缀和类型，用户确认后返回新的文件句柄，后续写入流程和修改文件一致。
async function createNewFile() {
try {
// 弹出保存文件对话框，配置默认文件名和接受的类型
const fileHandle = await window.showSaveFilePicker({
suggestedName: '新建文档.txt',
types: [
{
description: '文本文件',
accept: {
'text/plain': ['.txt']
}
}
]
});
// 创建可写入流并写入内容
const writable = await fileHandle.createWritable();
await writable.write('这是通过File System Access API创建的新文件内容');
await writable.close();
console.log('新文件创建并保存成功');
} catch (err) {
console.error('创建新文件失败：', err);
}
}
常见使用限制和注意事项
- 所有文件操作都必须获得用户的主动授权，API无法在用户无感知的情况下访问文件系统，也不能记住用户的授权选择，每次重新访问页面都需要重新授权。
- 无法直接访问系统的根目录或者受保护的系统文件夹，用户只能选择自己有权限访问的目录下的文件。
- 写入大文件时需要注意性能问题，可写入流支持分段写入，避免一次性写入过大数据导致页面卡顿。
- 如果需要在不支持该API的浏览器中使用类似功能，可以降级使用传统的文件上传和a标签下载的方式实现基础的文件读写需求。
实际应用场景举例
该API适合用在需要本地文件交互的网页应用中，比如在线代码编辑器可以直接打开本地代码文件编辑后保存，笔记类应用可以让用户选择本地目录存储笔记文件，图片处理应用可以直接读取本地图片处理后保存到原位置等，能够大幅提升用户的使用体验。
File_System_Access_APIJavaScript文件操作前端文件读写修改时间：2026-07-03 07:54:22