HTML文件夹上传依赖非标准属性webkitdirectory（Chrome/Edge/Safari支持，返回所有嵌套文件并提供webkitRelativePath），Firefox用directory仅返回顶层文件；需手动处理路径还原、大文件夹内存风险及无进度反馈等问题。
HTML上传文件夹只靠 webkitdirectory 属性
原生 HTML 没有独立的「文件夹上传标签」，所有文件夹上传能力都依赖于 元素加一个非标准但被主流浏览器支持的属性：webkitdirectory。它不是 W3C 标准属性，而是 WebKit/Blink 内核（Chrome、Edge、新版 Safari）实现的扩展，Firefox 从 50+ 版本起也通过 directory 属性提供了兼容支持，但行为细节有差异。
-
webkitdirectory：Chrome / Edge / Safari 支持，触发原生文件夹选择器，选中后event.target.files返回的是该文件夹下**所有嵌套文件**（不含子文件夹本身），层级扁平化 -
directory：Firefox 支持（需配合multiple），但仅返回**顶层文件**（不递归子目录），且部分旧版 Firefox 会忽略该属性 - 二者不可同时使用，否则在 Chrome 中
directory会被忽略；建议只用webkitdirectory并做降级处理
files 对象在文件夹上传时的行为差异
当用户通过 webkitdirectory 选择一个文件夹，event.target.files 不再是单个或多个文件的简单列表，而是一个包含整个文件树中所有文件的 FileList —— 但关键点在于：它不保留路径信息，也不暴露文件夹结构。所有文件都以「根目录文件」身份平铺列出，file.webkitRelativePath 是唯一能还原层级的字段（仅 Chrome/Edge 支持，Firefox 返回空字符串）。
-
file.name只返回文件名（如report.pdf），无路径 -
file.webkitRelativePath返回相对路径（如docs/2024/q3/report.pdf），可用于服务端重建目录结构 - 没有
file.fullPath或file.path，前端无法获取绝对路径（安全限制） - 若需校验总大小，必须遍历全部
files并累加file.size
实际使用中必须手动处理的三个坑
直接加 webkitdirectory 不等于「开箱即用」。很多项目卡在上传后服务端收不到结构、前端误判文件数、或大文件夹卡死 UI，根本原因都在没绕过这些限制：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 浏览器不提供「文件夹元数据」：你无法通过 JS 获取所选文件夹的总文件数、总大小、是否含子目录等，只能靠遍历
files后计算，且要防files.length超过 10000 导致内存爆掉 - 无原生进度反馈：
webkitdirectory选择过程本身无事件钩子，用户点击「选择文件夹」到change触发之间，前端完全黑盒；不能显示「正在扫描…」提示 - 移动端基本不可用：iOS Safari 完全不支持
webkitdirectory，Android Chrome 支持但常受限于 WebView 版本；不要在混合 App 中默认启用
替代方案比硬扛 webkitdirectory 更可靠
如果你需要真正稳定的文件夹上传体验（比如上传整个项目源码、设计稿合集），别只盯着 HTML 属性。更务实的做法是分层应对：
- 对现代桌面 Chrome/Edge：用
webkitdirectory+file.webkitRelativePath构建 ZIP 流（如JSZip），前端打包后再上传单个 zip 文件 —— 避开后端解析目录结构的复杂性 - 对 Firefox 或需要跨平台：降级为多文件选择（
multiple），引导用户按住 Ctrl/Cmd 多选，或提供「拖拽整个文件夹到区域」的 Dropzone 方案（利用dataTransfer.items的webkitGetAsEntry()，但同样只限 Blink） - 彻底放弃原生：改用 WebAssembly 文件系统桥接（如
browserfs）或 Electron/TAURI 桌面壳，它们才能真正读取本地目录树
真正麻烦的从来不是加个属性，而是 webkitdirectory 给你一种「已支持」的错觉，却把路径还原、错误恢复、降级兜底这些事全推给开发者自己补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
