前端访问系统文件夹

随着前端技术和浏览器的升级，越来越多的功能可以在前端实现而不用依赖于后端。其中，访问系统文件夹是一个非常有用的功能，例如上传文件时，用户可以直接从自己的电脑中选择文件。

使用方法

在早期的浏览器中，要访问系统中的文件夹需要使用 ActiveX 控件或 Java Applet，这些方法已经逐渐淘汰。现在，访问系统文件夹需要使用HTML5的 API。

最常使用的 API 是FileAPI，配合 input[type="file"] 通过用户的交互行为来获取文件。但是，这种方法需要用户选择具体的文件而不是像在系统中打开文件夹来进行选择。

HTML5 还提供了更加高级的 API，如 showDirectoryPicker。它支持在浏览器中打开一个目录选择器，从而简化了选择文件夹的流程。这个 API 的使用也很简单，只需要调用 showDirectoryPicker() 方法即可。

async function pickDirectory() {
const directoryHandle = await window.showDirectoryPicker();
console.log(directoryHandle);

}

但是需要注意的是该api的兼容性较低，目前所支持的浏览器如下图所示:

点击一个按钮后，调用 pickDirectory() 方法即可打开选择文件夹的对话框，选择完文件夹后，该方法会返回一个 FileSystemFileHandle 对象，开发者可以使用这个对象来访问所选择的目录的内容。

应用场景

访问系统文件夹可以用于很多场景，下面列举几个常用的场景。

上传文件

在前端上传文件时，用户需要选择所需要上传的文件。这时，打开一个文件夹选择器，在用户选择了一个文件夹后，就可以读取文件夹中的文件并进行上传操作。

本地文件管理

将文件夹中的文件读取到前端后，可以在前端进行一些操作，如修改文件名、查看文件信息等。这个在 纯前端文件管理器 中就被广泛使用。

编辑器功能

访问系统文件夹可以将前端编辑器与本地的文件夹绑定，使得用户直接在本地进行编写代码，而不是将代码保存到云端，这对于某些敏感数据的处理尤为重要。

结尾的话

通过HTML5的 API，前端可以访问到系统中的文件夹，这项功能可以应用于上传文件、本地文件管理和编辑器功能等场景，为用户带来了极大的便利。