【前端】Web操作文件的可能性——浅谈一下File System Api

2025/6/8 13:59:58 来源：https://blog.csdn.net/qq_41883423/article/details/140037060 浏览: 次关键词：【前端】Web操作文件的可能性——浅谈一下File System Api

Web操作文件的可能性——浅谈一下File System Api

随着Web技术的发展，现代Web应用程序越来越多地需要与用户的本地文件系统交互。文件系统API（File System API）为开发者提供了一组标准和接口，使得Web应用程序可以像本地应用程序一样读取和写入文件。本文将深入介绍这些API的使用和实现，并展示一些具体的应用场景。

文件系统API的主要组件

File API：允许Web应用程序通过文件输入元素或拖放操作访问用户本地文件。
FileReader API：提供异步读取文件内容的功能。
FileWriter API：允许Web应用程序写入文件，尽管目前尚未得到广泛支持。
File System Access API：提供对用户本地文件和目录的读写访问权限。

1. File API

File API 是文件系统API的基础，允许用户通过文件输入元素或拖放操作选择本地文件。以下是一个简单的示例，展示如何使用File API读取用户选择的文件内容：

<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {const file = event.target.files[0];const reader = new FileReader();reader.onload = function(e) {console.log(e.target.result); // 输出文件内容};reader.readAsText(file);
});
</script>

2. FileReader API

FileReader API 提供了异步读取文件内容的功能，可以将文件读取为文本、Data URL、ArrayBuffer等格式。以下是读取文件为文本的示例：

const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();reader.onload = function(e) {console.log(e.target.result);
};reader.readAsText(file);

3. FileWriter API

FileWriter API 允许Web应用程序写入文件。然而，目前这一功能在标准化进程中，还没有得到广泛支持。下面是一个简单的示例，展示如何创建并写入文件：

// 假设 FileWriter API 已得到广泛支持
const fileHandle = await window.chooseFileSystemEntries({type: 'save-file',accepts: [{description: 'Text file',extensions: ['txt'],mimeTypes: ['text/plain'],}],
});
const writable = await fileHandle.createWritable();
await writable.write('Hello, world!');
await writable.close();

4. File System Access API

File System Access API 是一组较新的API，提供了更强大的文件和目录读写能力。以下示例展示了如何使用该API保存文件到本地：

async function saveFile() {const options = {types: [{description: 'Text Files',accept: {'text/plain': ['.txt'],},},],};try {const handle = await window.showSaveFilePicker(options);const writable = await handle.createWritable();await writable.write('Hello, world!');await writable.close();} catch (err) {console.error(err);}
}