js实现文件夹选择器

2026-03-02 02:55:49JavaScript

使用 `<input type="file">` 实现文件夹选择

通过设置 webkitdirectory 属性（Chrome/Edge）或 directory 属性（Firefox），允许用户选择文件夹而非单个文件。示例代码：

<input type="file" id="folderInput" webkitdirectory directory multiple />
<script>
  document.getElementById('folderInput').addEventListener('change', (event) => {
    const files = event.target.files;
    for (const file of files) {
      console.log(file.webkitRelativePath); // 输出文件在文件夹中的相对路径
    }
  });
</script>

监听拖放文件夹事件

通过 drop 事件监听用户拖放的文件夹，需配合 DataTransferItem API 处理目录结构：

document.addEventListener('drop', (e) => {
  e.preventDefault();
  const items = e.dataTransfer.items;
  for (const item of items) {
    if (item.kind === 'file') {
      const entry = item.webkitGetAsEntry();
      if (entry.isDirectory) {
        readDirectory(entry);
      }
    }
  }
});

function readDirectory(directoryEntry) {
  const reader = directoryEntry.createReader();
  reader.readEntries((entries) => {
    for (const entry of entries) {
      if (entry.isFile) {
        entry.file((file) => {
          console.log(file.name);
        });
      }
    }
  });
}

使用第三方库（如 `file-system-access`）

对于需要更复杂操作的场景，可考虑使用支持现代 File System Access API 的库：

import { showDirectoryPicker } from 'file-system-access';

async function pickFolder() {
  const dirHandle = await showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    console.log(entry.name);
  }
}

注意：File System Access API 目前仅在高版本 Chrome/Edge 中完全支持。