如何利用J*aScript操作系统文件（通过File System Access API）？

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何利用J*aScript操作系统文件（通过File System Access API）？

2025-10-10

浏览次数：次

返回列表

File System Access API 允许网页在用户授权后读写本地文件，支持 Chrome 86+ 和 Edge 95+，通过 showOpenFilePicker() 读取文件，showS*eFilePicker() 保存文件，showDirectoryPicker() 访问文件夹，createWritable() 修改文件内容，并可请求持久化权限以减少重复授权，适用于文本编辑、笔记等需本地存储的场景。

如何利用javascript操作系统文件（通过file system access api）？

J*aScript 本身在浏览器环境中无法直接访问操作系统文件系统，出于安全考虑，传统 Web API 对文件操作非常受限。但现代浏览器引入了 File System Access API，允许用户主动授权后，网页可以读取、写入和管理本地文件与文件夹。这个 API 提供了更接近原生应用的体验。

启用条件与浏览器支持

File System Access API 目前主要在基于 Chromium 的浏览器中支持（如 Chrome 86+、Edge 95+），Safari 和 Firefox 尚未支持。使用前应检查兼容性：

if ('showOpenFilePicker' in window) {
  // 可以使用 File System Access API
} else {
  alert('你的浏览器不支持此功能，请使用最新版 Chrome 或 Edge');
}

打开并读取文件

通过 showOpenFilePicker() 方法让用户选择文件，获取可操作的句柄，然后读取内容：

async function openFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker({
      types: [
        {
          description: '文本文件',
          accept: { 'text/plain': ['.txt'] }
        }
      ],
      excludeAcceptAllOption: true,
      multiple: false
    });
<pre class="brush:php;toolbar:false;">const file = await fileHandle.getFile();
const contents = await file.text();
console.log(contents);
return contents;

} catch (err) { console.error('用户取消或出错：', err); } }

说明：
- types 定义允许选择的文件类型。
- multiple: true 可允许多选。
- 获取到 fileHandle 后，调用 getFile() 得到标准 File 对象，再读取内容。

创建并保存新文件

使用 showS*eFilePicker() 让用户指定保存路径和文件名：

async function s*eFile(content) {
  const fileHandle = await window.showS*eFilePicker({
    suggestedName: 'untitled.txt',
    types: [{
      description: '文本文件',
      accept: { 'text/plain': ['.txt'] }
    }]
  });
<p>const writable = await fileHandle.createWritable();
await writable.write(content);
await writable.close();
}

流程：
- 用户选择保存位置。
- 调用 createWritable() 创建可写流。
- 写入内容后关闭流，完成保存。

读写已有文件（修改文件）

如果已有一个文件句柄，可以直接重新写入内容：

async function updateFile(fileHandle, newContent) {
  const writable = await fileHandle.createWritable();
  await writable.write(newContent);
  await writable.close();
}

注意：必须是用户先前通过选择器授予访问权限的文件，不能随意修改任意路径文件。

青泥AI

青泥学术AI写作辅助平台

360 查看详情青泥AI

访问文件夹（目录）

使用 showDirectoryPicker() 可访问整个文件夹结构：

async function openFolder() {
  const dirHandle = await window.showDirectoryPicker();
<p>for await (const entry of dirHandle.values()) {
if (entry.kind === 'file') {
const file = await entry.getFile();
console.log(file.name, file.size);
}
}
}

你可以遍历文件夹中的文件或子目录，并对每个文件进行读取或写入操作。

持久化权限（记住访问过的文件）

一旦用户授予某个文件或文件夹访问权限，可以请求持久保留权限：

if ((await fileHandle.queryPermission({ mode: 'readwrite' })) === 'granted') {
  // 已有权限
} else {
  // 请求权限
  await fileHandle.requestPermission({ mode: 'readwrite' });
}

浏览器可能会记住用户的信任选择，减少重复授权提示。

基本上就这些。File System Access API 让 Web 应用具备了更强的本地文件操作能力，适合编辑器、配置工具、离线笔记等场景。关键是所有操作都需用户主动触发并授权，确保安全。不复杂但容易忽略的是，每次操作都要处理用户取消或异常情况。

以上就是如何利用J*aScript操作系统文件（通过File System Access API）？的详细内容，更多请关注其它相关文章！

# 如何使用 # 广州直销网站建设 # 黄岗网站推广软件免费用是 # 关键词快速排名加盟费用 # 乐从大良网站建设 # 太原网站建设要点优化 # 礼品类网站建设策划方案 # 岑巩网站优化与推广 # 国外推广网站平台有哪些 # 文章采集器附子seo # 快手刷粉网站推广QQ # 的是 # 如何实现 # 文本文件 # 如何用 # javascript # 选择器 # 句柄 # 可以使用 # 已有 # win # ai # safari # 工具 # access # edge # 浏览器 # 操作系统 # java