js实现文件目录选择

2026-03-01 03:09:47JavaScript

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

通过 HTML 原生文件输入框实现单个或多个文件选择，支持目录选择（需添加 webkitdirectory 属性）：

js实现文件目录选择

<input type="file" id="fileInput" webkitdirectory multiple />
<script>
  document.getElementById('fileInput').addEventListener('change', (event) => {
    const files = event.target.files;
    console.log('Selected files:', files);
  });
</script>

webkitdirectory: 允许选择目录（仅限 Chrome/Edge 等基于 Chromium 的浏览器）。
multiple: 允许多选文件或目录内容。

使用 `showDirectoryPicker()` API（现代浏览器）

通过 File System Access API 实现更灵活的目录选择（需用户主动触发，如点击事件）：

async function pickDirectory() {
  try {
    const dirHandle = await window.showDirectoryPicker();
    const files = [];
    for await (const entry of dirHandle.values()) {
      if (entry.kind === 'file') {
        files.push(entry.name);
      }
    }
    console.log('Directory contents:', files);
  } catch (err) {
    console.error('User cancelled or API not supported:', err);
  }
}

仅支持 HTTPS 或本地开发环境。
返回的是文件句柄（FileSystemHandle），需进一步处理获取文件内容。

通过拖放（Drag & Drop）实现

监听拖放事件获取目录中的文件列表：

<div id="dropZone">拖放目录或文件到此处</div>
<script>
  const dropZone = document.getElementById('dropZone');
  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    const items = e.dataTransfer.items;
    const files = [];
    for (let i = 0; i < items.length; i++) {
      if (items[i].webkitGetAsEntry()?.isDirectory) {
        console.log('Directory dropped (limited access)');
      } else {
        files.push(items[i].getAsFile());
      }
    }
    console.log('Dropped files:', files);
  });
  dropZone.addEventListener('dragover', (e) => e.preventDefault());
</script>