Firefox中使用window.showDirectoryPicker的替代方案有哪些？

1. 传统文件输入框（全浏览器兼容） #

使用带directory/webkitdirectory属性的文件输入框，这是Firefox上最直接的目录选择方案：

<input type="file" directory webkitdirectory multiple>
<script>
document.querySelector('input[type="file"]').addEventListener('change', (e) => {
  const selectedFiles = e.target.files;
  // 遍历选中目录下的所有文件，通过webkitRelativePath获取文件在目录中的层级路径
  for (const file of selectedFiles) {
    console.log('文件名:', file.name, '相对路径:', file.webkitRelativePath);
  }
});
</script>

说明：该方案能让用户选择目录并获取其中所有文件，但无法直接拿到FileSystemDirectoryHandle，仅能处理文件本身，适合仅需读取目录内文件的场景。

2. 利用Firefox已支持的文件句柄API间接获取目录 #

Firefox支持FileSystemDirectoryHandle但无原生选择器，可通过以下方式间接获取目录句柄：

• 通过已授权目录访问：若用户之前授予过网站目录访问权限，可调用navigator.storage.getDirectory()获取根目录句柄，再通过自定义界面让用户选择子目录；
• 通过文件获取父目录：先让用户选择目录下的某个文件，再通过getParent()拿到其父目录句柄：

async function getDirectoryFromFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    const parentDirHandle = await fileHandle.getParent();
    // 遍历目录下的所有条目
    for await (const entry of parentDirHandle.values()) {
      console.log('条目名称:', entry.name, '类型:', entry.kind);
    }
    return parentDirHandle;
  } catch (err) {
    console.error('操作失败:', err);
  }
}

说明：这种方式依赖用户先选择文件，局限性较大，适合已有文件操作场景下的目录需求。

3. 渐进式适配（兼顾Chromium与Firefox） #

针对不同浏览器做差异化处理，优先使用标准API，Firefox下自动降级到兼容方案：

async function pickDirectory() {
  let dirHandle;
  try {
    // Chromium系浏览器使用标准目录选择器
    dirHandle = await window.showDirectoryPicker();
  } catch (err) {
    // Firefox下使用文件输入框降级处理
    const input = document.createElement('input');
    input.type = 'file';
    input.directory = true;
    input.webkitdirectory = true;

    const fileResolvePromise = new Promise(resolve => {
      input.addEventListener('change', e => resolve(e.target.files));
    });

    input.click();
    const selectedFiles = await fileResolvePromise;
    // 可选：通过选中的第一个文件获取父目录句柄
    if (selectedFiles.length > 0) {
      const [tempFileHandle] = await window.showOpenFilePicker();
      dirHandle = await tempFileHandle.getParent();
    }
  }
  return dirHandle;
}

内容的提问来源于stack exchange，提问作者Dan D