开始使用文件系统访问API

File System Access API为Web开发人员提供了一种功能强大的工具，可直接与用户的本地文件进行交互，从而启用读写访问。这为构建复杂的Web应用程序提供了令人兴奋的可能性，包括高级文本编辑器，IDE，图像操作工具以及增强的进出口功能，都在浏览器的前端内。让我们探索如何开始使用此API。

访问文件：阅读和写作

使用文件系统访问API的一个关键方面是安全性。所有API调用都必须在安全上下文中通过用户手势启动。我们将在下面的示例中使用单击事件。

读取文件：单文件

读取单个文件非常简洁：

令filehandle;

document.queryselector（“。pick-file”）。onclick = async（）=> {
  [fileHandle] =等待窗口。showopenfilepicker（）;

  const file =等待filehandle.getFile（）;
  const content =等待file.text（）;

  返回内容；
};

假设一个带有“挑选文件”的HTML按钮，单击此按钮会通过window.showOpenFilePicker()触发文件选择器。所选文件的句柄存储在fileHandle中。该功能将文件的内容返回文本。

fileHandle对象提供诸如kind （“文件”或“目录”）和name的属性。

 //示例从Console.log（fileHandle）输出
filesystemfilehandle {chink：'file'，name：'data.txt'}

fileHandle.getFile()检索文件详细信息（最后修改的时间戳，名称，大小，类型）和file.text()提取文件的内容。

读取多个文件

要读取多个文件，请将选项对象传递给showOpenFilePicker() ：

让filehandles;
const options = {多重：true};

document.queryselector（“。pick-file”）。onclick = async（）=> {
  fileHandles =等待窗口。showopenfilepicker（options）;

  //代码处理多个文件（请参阅下文）
};

multiple属性（默认值： false ）启用多个文件选择。更多选项指定可接受的文件类型。例如，仅接受JPEG图像：

 const Options = {
  类型：[{描述：“图像”，接受：{“ image/jpeg”：“ .jpeg”}}]，
  排除consceptalloption：是的，
};

处理多个文件：

 const allContent =等待承诺
  filehandles.map（async（filehandle）=> {
    const file =等待filehandle.getFile（）;
    const content =等待file.text（）;
    返回内容；
  }））
）；

console.log（allContent）;

写入文件：新文件

创建和写入新文件同样简单：

 document.queryselector（“。save-file”）。onclick = async（）=> {
  const Options = {
    类型：[{description：“测试文件”，接受：{“ text/plain”：[.txt“]}}}，
  };

  const handle =等待窗口。
  const writable =等待句柄。

  等待Writable.Write（“ Hello World”）;
  等待Writable.Close（）;

  返回手柄；
};

window.showSaveFilePicker()打开文件保存对话框。 handle.createWritable()创建一个可写的流， writable.write()写入data和writable.close()最终确定写操作。

编辑现有文件

修改现有文件：

令filehandle;

document.queryselector（“。pick-file”）。onclick = async（）=> {
  [fileHandle] =等待窗口。showopenfilepicker（）;

  const file =等待filehandle.getFile（）;
  const writable =等待fileHandle.CreateWrrable（）;

  等待writable.write（“这是一条新行”）； //附加到文件
  等待Writable.Close（）;
};

此示例附加文本；要覆盖，请写入整个所需的内容。

高级功能

文件系统访问API还支持目录列表和文件/目录删除。

目录列表

document.queryselector（“。read-dir”）。
  const directoryhandle =等待窗口.showdirectorypicker（）;

  等待（目录Handle.Values（）的const条目）{
    console.log（entry.kind，entry.name）;
  }
};

window.showDirectoryPicker()选择一个目录，循环通过其条目迭代。

文件和目录删除

删除文件：

 document.queryselector（“。pick-file”）。onclick = async（）=> {
  const [fileHandle] =等待窗口。showopenfilepicker（）;
  等待filehandle.remove（）;
};

删除目录（递归）：

 document.queryselector（“。pick-folder”）。onclick = async（）=> {
  const directoryhandle =等待窗口.showdirectorypicker（）;
  等待DirectoryHandle.removeentry（'data'，{recursive：true}）;
};

浏览器兼容性

文件系统访问API在现代浏览器中享有广泛的支持，但请检查Caniuse.com以获取最新的兼容性信息。像browser-fs-access一样的小马填充可以解决兼容性差距。

资源

• 文件系统访问API（W3C规范）
• 文件系统访问API（MDN）
• 其他相关资源

这种增强的解释为文件系统访问API提供了更全面和结构化的指南。请记住，用与相关文档的实际链接替换占位符链接。

以上是开始使用文件系统访问API的详细内容。更多信息请关注PHP中文网其他相关文章！