input 标签 type="file" 属性的 webkitdirectory 属性在文件夹上传中的递归深度-html教程-PHP中文网

webkitdirectory不能递归上传子文件夹，仅获取所选文件夹的直接子文件，忽略所有子目录；要实现真正递归需用showdirectorypicker()手动遍历，但该api仅chrome/edge支持且需https和用户授权。

$input 标签 type=\$

webkitdirectory 能否递归上传子文件夹

不能。webkitdirectory 仅支持选择一个文件夹及其**直接子文件**，所有子文件夹本身会被当作目录项忽略，不会递归读取其内部内容。

这是 WebKit/Blink 内核的明确行为限制，不是浏览器 bug，也不是配置问题。Chrome、Edge、Safari（macOS）均如此——选中 foo/，得到的是 foo/file1.txt、foo/image.png，但 foo/sub/ 这个目录对象不会触发任何文件读取，也不会出现在 input.files 列表中。

input.files 返回的 FileList 里只含文件，不含 Directory 对象
即使用户手动勾选了嵌套文件夹（某些系统 UI 允许），浏览器仍会过滤掉所有 kind === "directory" 的条目
没有标准 API 可通过 webkitdirectory 触发多层遍历

想真正递归上传必须自己实现目录遍历

要拿到 foo/sub/nested.txt，必须用 webkitdirectory 获取顶层目录后，再借助 FileSystemDirectoryHandle（即 File System Access API）手动遍历。

注意：这不是 webkitdirectory 的延伸能力，而是完全独立的新路径，且有严格前提：

仅在 HTTPS 或 localhost 下可用
需用户主动授予目录访问权限（首次调用 showDirectoryPicker() 会弹框）
Chrome 86+、Edge 86+ 支持；Firefox 和 Safari 不支持该 API

示例关键逻辑：

知识星球

知识星球是一款AI文本写作工具，内容创作者的知识社群运营工具。

下载

const dir = await window.showDirectoryPicker();
const files = [];
for await (const entry of dir.values()) {
  if (entry.kind === 'file') {
    const file = await entry.getFile();
    files.push(new File([await file.arrayBuffer()], `${dir.name}/${entry.name}`, { type: file.type }));
  } else if (entry.kind === 'directory') {
    // 递归处理子目录（需自己写遍历函数）
  }
}