HTML批量文件夹上传怎么做？详细操作流程-html教程-PHP中文网

原生不支持多文件夹选择，因webkitdirectory是单目录私有扩展，multiple对其无效；必须用拖放API配合webkitGetAsEntry()递归遍历多个文件夹，并上传文件及对应fullPath以还原目录结构。

html批量文件夹上传怎么做？详细操作流程

原生不支持同时选择多个文件夹，这是硬性限制，不是配置问题。想实现“批量文件夹上传”，必须绕过，改用拖放（Drag & Drop）API + webkitGetAsEntry() 或现代 FileSystemDirectoryHandle（仅 Chromium 系列支持）来遍历多个文件夹结构。

为什么 `webkitdirectory` 只能选一个文件夹？

这个属性是 WebKit/Blink 内核的私有扩展，设计初衷就是单目录选择。即使加了 multiple，浏览器也只允许用户在文件对话框里点一次、选一个目录——multiple 对它完全无效。

在 Chrome/Firefox/Safari 中行为一致：只弹出单目录选择框，multiple 被忽略
选中的 FileList 里只有一个 File 对象，但它的 webkitRelativePath 是空字符串，无法还原层级
Firefox 和 Safari 已明确不支持 webkitdirectory，仅 Chrome/Edge 有效，且无跨平台替代方案

用拖放 API 获取多个文件夹的真实路径结构

用户把多个文件夹拖进页面区域后，通过 event.dataTransfer.items 拿到 DataTransferItem，再调用 webkitGetAsEntry() 得到 FileSystemEntry（Chrome/Edge），然后递归读取子项。这是目前唯一可靠的方式。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

必须监听 dragover 并调用 event.preventDefault()，否则 drop 事件不会触发
item.webkitGetAsEntry() 返回的是 FileSystemDirectoryEntry 或 FileSystemFileEntry，不是 File，不能直接丢给 FormData
需手动递归调用 createReader().readEntries()，把每个 File 实例提取出来，并拼接 fullPath 作为服务端还原目录结构的依据

示例关键片段：

dropzone.addEventListener('drop', async (e) => {
  e.preventDefault();
  const items = Array.from(e.dataTransfer.items);
  for (const item of items) {
    if (item.kind === 'file') {
      const entry = item.webkitGetAsEntry();
      if (entry && entry.isDirectory) {
        await traverseDir(entry, []);
      }
    }
  }
});

服务端如何保留上传的文件夹层级？

前端不能只传 File 对象，必须把每个文件的相对路径（如 /project/src/index.js）作为额外字段一并上传。否则服务端收到的只是扁平文件流，无法重建结构。

构建 FormData 时，对每个 File 添加两个字段：formData.append('files', file) + formData.append('paths', fullPath)
后端接收时，按顺序配对 files[i] 和 paths[i]，用 path.join(uploadRoot, paths[i]) 确保写入正确子目录
注意路径校验：过滤掉 ../、绝对路径开头（/ 或 C:\）等恶意构造，避免路径遍历漏洞
Node.js 示例中，multer 默认不解析多字段，需配合 busboy 或自定义中间件处理混合字段

真正难的不是“怎么选”，而是“怎么让成千上万个嵌套文件不卡死主线程、不爆内存、还能断点续传”。递归读取大目录时，要用 setTimeout 或 queueMicrotask 分片处理；上传队列得加并发控制；每个文件的 File 实例本身不包含路径信息，全靠前端在遍历时手工维护——这点最容易漏，导致服务端收到一堆同名文件却不知该放哪层。