掌握File System Access API：实现文件选择器目录持久化指南

本文深入探讨了在Web应用程序中利用File System Access API实现文件选择器目录持久化的方法。针对无法直接指定任意本地驱动器路径（如`D:\`）作为默认起始目录的安全限制，文章详细介绍了如何通过`showOpenFilePicker`和`showSaveFilePicker`方法的`id`属性或`startIn`属性结合`FileSystemHandle`对象，来记忆并重用用户上次选择的目录，从而优化用户体验。

引言：文件选择器与安全限制

在Web应用程序中，文件上传和下载是常见功能。开发者有时会希望能够指定文件选择器（File Picker）默认打开的目录，例如直接指向特定的本地驱动器（如D:\）。然而，出于浏览器安全模型的设计，Web页面无法直接访问或指定本地文件系统的任意路径。传统的元素不提供设置默认目录的功能，而较新的File System Access API虽然提供了更强大的文件系统交互能力，但对于初始目录的设定也存在特定的限制。

当尝试在showOpenFilePicker方法的startIn属性中直接设置如D:\这样的绝对路径时，浏览器会抛出TypeError，提示该值不是WellKnownDirectory枚举类型中的有效值。这明确指出startIn属性仅接受预定义的“已知目录”（如'documents'、'downloads'、'pictures'等）或一个FileSystemHandle对象。

理解showOpenFilePicker的startIn属性

showOpenFilePicker方法允许通过startIn属性来建议文件选择器打开的初始目录。然而，此属性并非用于指定任意文件系统路径，其接受的值类型有限：

1. WellKnownDirectory枚举值：例如'documents'、'downloads'、'pictures'、'videos'、'music'或'desktop'。这些是操作系统中预设的特殊目录。

   async function openFileInDocuments() {
       const [fileHandle] = await window.showOpenFilePicker({
           startIn: 'documents'
       });
       // ... 处理文件句柄
   }

   登录后复制
2. FileSystemHandle对象：如果你的应用程序已经通过之前的操作获得了某个目录或文件的FileSystemHandle，你可以将其作为startIn的值，文件选择器将尝试在该句柄所代表的目录下打开。

实现文件选择器目录持久化策略

虽然无法直接指定任意驱动器路径，但File System Access API提供了两种机制，可以在用户首次选择目录后，在后续的文件选择操作中“记住”并重用该目录，从而提升用户体验。

策略一：利用id属性实现目录记忆

showOpenFilePicker和showSaveFilePicker方法都支持一个可选的id属性。当你在多次调用这些方法时使用相同的id值，浏览器会尝试记住用户上次使用该id时所选择的目录，并在后续调用中将文件选择器默认打开到该目录。

工作原理：

1. 首次调用：当首次使用某个id调用showOpenFilePicker时，文件选择器会打开默认目录（或startIn指定的WellKnownDirectory）。用户需要手动导航到他们希望的目录（例如D:\foo\），并选择文件。
2. 后续调用：再次使用相同的id调用showOpenFilePicker或showSaveFilePicker时，浏览器会尝试将文件选择器直接打开到上次用户为该id选择的目录。

示例代码：

墨狐AI

5分钟生成万字小说，人人都是小说家！

249

查看详情

async function uploadFileToDDrive() {
    // 第一次调用：用户需要手动导航到 D:\foo\ 目录并选择文件
    // 假设用户选择了 D:\foo\myfile.bar
    let [handle] = await window.showOpenFilePicker({ id: "myAppSpecificDrive" });
    console.log("第一次选择的文件句柄:", handle);

    // 假设在另一个操作中，需要再次打开文件选择器
    // 第二次调用：文件选择器将直接打开到 D:\foo\ 目录
    // 用户可以在此目录中选择另一个文件
    let [anotherHandle] = await window.showOpenFilePicker({ id: "myAppSpecificDrive" });
    console.log("第二次选择的文件句柄:", anotherHandle);

    // 对于保存文件也同样适用
    // 假设需要保存一个文件，文件选择器也将打开到 D:\foo\ 目录
    let saveHandle = await window.showSaveFilePicker({ id: "myAppSpecificDrive" });
    console.log("保存文件的句柄:", saveHandle);
}

// 调用函数以演示
uploadFileToDDrive();

注意事项：

• id值在应用程序的生命周期内有效，但可能受限于浏览器会话或用户清空浏览器数据。
• 不同的id值会维护各自独立的目录记忆。

策略二：利用FileSystemHandle作为startIn值

如果你已经通过之前的操作（例如用户上传文件或保存文件）获得了某个目录或文件的FileSystemHandle，你可以直接将这个句柄作为后续showOpenFilePicker或showSaveFilePicker调用的startIn属性值。文件选择器将直接打开到该句柄所在的目录。

工作原理：

1. 获取句柄：首先通过一次用户交互（如showOpenFilePicker）获取一个FileSystemHandle。
2. 重用句柄：在后续操作中，将这个已获取的句柄传递给startIn属性。

示例代码：

let lastUsedDirectoryHandle = null; // 用于存储上次使用的目录句柄

async function openFileInLastUsedDirectory() {
    let fileHandle;
    if (lastUsedDirectoryHandle) {
        // 如果有上次使用的目录句柄，则尝试在该目录打开
        [fileHandle] = await window.showOpenFilePicker({
            startIn: lastUsedDirectoryHandle
        });
    } else {
        // 第一次打开，用户需要手动导航
        [fileHandle] = await window.showOpenFilePicker();
    }

    // 获取文件所在的目录句柄，以便下次使用
    lastUsedDirectoryHandle = await fileHandle.getParentHandle();
    console.log("当前选择的文件句柄:", fileHandle);
    console.log("上次使用的目录句柄已更新为:", lastUsedDirectoryHandle);
}

// 调用函数以演示
openFileInLastUsedDirectory();
// 假设用户选择了 D:\documents\report.pdf
// 再次调用，文件选择器将直接打开 D:\documents\ 目录
openFileInLastUsedDirectory();

注意事项：

• FileSystemHandle的有效性可能受限于用户授权和浏览器会话。
• 这种方法需要你显式地存储和管理目录句柄。

startIn属性的优先级

当showOpenFilePicker或showSaveFilePicker方法同时接收多个可能影响起始目录的参数时，它们之间存在优先级：

1. startIn: FileSystemHandle：具有最高优先级。如果提供了有效的FileSystemHandle，文件选择器将尝试在该句柄代表的目录下打开。
2. id属性：次优先级。如果提供了id且浏览器有该id对应的上次使用的目录记忆，文件选择器将打开到该记忆目录。
3. startIn: WellKnownDirectory：最低优先级。如果以上两者都未指定或无效，将使用WellKnownDirectory指定的目录作为起始。

总结

尽管出于安全考虑，Web应用程序无法直接指定任意本地驱动器路径作为文件选择器的默认起始目录，但File System Access API通过id属性和startIn属性结合FileSystemHandle，提供了有效的目录持久化策略。开发者可以利用这些机制，在用户首次导航到特定目录后，在后续操作中自动将文件选择器打开到该目录，从而显著提升用户体验，尤其是在需要频繁在特定目录进行文件操作的受控环境中。理解这些限制和可用的解决方案，是构建高效且安全的Web文件交互功能的关键。

以上就是掌握File System Access API：实现文件选择器目录持久化指南的详细内容，更多请关注php中文网其它相关文章！