js实现文件目录选择

2026-01-30 12:01:23JavaScript

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

通过 HTML 的 input 元素配合 webkitdirectory 属性（非标准但主流浏览器支持）实现目录选择：

<input type="file" id="dirPicker" webkitdirectory directory multiple />
<script>
  document.getElementById('dirPicker').addEventListener('change', (event) => {
    const files = event.target.files;
    console.log(files); // 文件列表（包含目录结构信息）
  });
</script>

注意：

webkitdirectory 和 directory 属性需同时声明以兼容不同浏览器。
multiple 允许选择多个文件（实际会包含目录下所有文件）。

使用 File System Access API（现代浏览器）

Chrome 86+ 和 Edge 支持更强大的文件系统访问 API，允许直接获取目录句柄：

async function pickDirectory() {
  try {
    const dirHandle = await window.showDirectoryPicker();
    const files = [];
    for await (const entry of dirHandle.values()) {
      files.push(entry);
    }
    console.log(files); // 包含文件/子目录的 FileSystemHandle 对象
  } catch (err) {
    console.error("用户取消选择或API不支持:", err);
  }
}

特性：

返回 FileSystemDirectoryHandle 对象，可递归遍历目录。
需在安全上下文（HTTPS 或 localhost）中运行。

兼容性处理方案

若需兼容旧版浏览器，可降级到普通文件选择：

const isDirSupported = 'webkitdirectory' in HTMLInputElement.prototype;
const input = document.createElement('input');
input.type = 'file';
if (isDirSupported) {
  input.webkitdirectory = true;
} else {
  console.warn("浏览器不支持目录选择");
}

后端配合处理

选择目录后，通常需通过 FormData 上传文件列表：

const formData = new FormData();
Array.from(files).forEach(file => {
  formData.append('uploads[]', file, file.webkitRelativePath);
});
fetch('/upload', { method: 'POST', body: formData });

关键点：

js实现文件目录选择