HTML拖拽文件夹上传实现教程-html教程-PHP中文网

event.dataTransfer.items是唯一能可靠读取拖拽文件夹内容的入口，因files只暴露顶层项（如文件夹本身），不递归展开；items则提供可遍历的DataTransferItem列表，支持webkitGetAsEntry()递归访问子项，而Firefox仅支持getAsFile()扁平读取，iOS Safari和Android Chrome完全不支持文件夹拖拽。

html拖拽文件夹上传实现教程

event.dataTransfer.items 是唯一能可靠读取拖拽文件夹内容的入口，event.dataTransfer.files 对文件夹始终为空——这不是 bug，是浏览器规范行为。

为什么 files 里永远看不到文件夹里的文件

浏览器把“拖拽一个文件夹”和“拖拽一堆文件”当作两类操作：files 只暴露顶层被直接选中的项（即文件夹本身，类型为 application/x-directory），不递归展开；而 items 才包含可遍历的 DataTransferItem 列表，其中每个 item 可能是文件、目录，或剪贴板内容。

Chrome / Edge 支持 item.webkitGetAsEntry()，返回 FileSystemEntry（含 isFile/isDirectory）
Firefox 不支持 webkitGetAsEntry，但可通过 item.getAsFile() 拿到单个文件（仅限扁平拖拽，不支持嵌套文件夹）
macOS 拖文件夹进网页时，files 里可能有 1 个伪文件（name 为文件夹名，size 为 0），别误判为有效文件

如何安全递归扫描文件夹（含兼容 fallback）

必须用 items + webkitGetAsEntry 启动递归，且需处理 Promise 链断裂、循环引用、权限拒绝等异常。

对每个 item 调用 item.webkitGetAsEntry()，判空后才继续
目录 entry 调用 createReader().readEntries()，该方法返回 Promise，不能用同步 for 循环遍历
遇到 DOMException: The request is not allowed by the user agent 表示用户未授权访问文件系统，应降级提示“请改用文件选择器”
递归深度超过 10 层时主动截断，避免栈溢出或卡死（尤其 Windows 网络驱动器下 symlink 可能成环）

示例关键逻辑：

DeepBI DHTML 页面生成器

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

下载

async function traverse(entry, path = '') {
  if (entry.isFile) {
    return new Promise(resolve => entry.file(file => resolve({ file, path: path + file.name })));
  }
  if (entry.isDirectory) {
    const reader = entry.createReader();
    const entries = await new Promise(resolve => reader.readEntries(resolve));
    const results = [];
    for (const e of entries) {
      results.push(...await traverse(e, path + entry.name + '/'));
    }
    return results;
  }
  return [];
}