webkitdirectory是唯一可行的原生方案，因HTML标准未定义文件夹上传，它作为事实标准通过file.webkitRelativePath保留路径结构，需同时设webkitdirectory、directory和multiple属性。
不能直接上传整个文件夹，但可以用 webkitdirectory 让浏览器递归读取文件夹内所有文件，并保留路径结构——前提是用户主动选择文件夹，且浏览器支持（Chrome/Edge/Firefox 支持，Safari 和旧版 IE 不支持）。
为什么 webkitdirectory 是唯一可行的原生方案
HTML 标准本身不定义“文件夹上传”概念，<input type="file"> 只能选文件。webkitdirectory 是 Chromium 和 Firefox 实现的扩展属性（虽带前缀，但已成事实标准），它触发浏览器遍历所选文件夹下的**全部文件**（不含子文件夹元数据，只展平为文件列表），并把 file.webkitRelativePath 设为从根文件夹开始的相对路径，比如 "project/src/main.js"。
常见错误现象：
- 加了
webkitdirectory但控制台里files[i].webkitRelativePath是空字符串 → 用户没选中文件夹，而是点了文件夹里的某个文件（此时它只是单个文件，无路径信息） - 用
directory属性但没加webkitdirectory→ 大部分浏览器直接忽略，降级为普通多文件选择 - 试图用 JS 模拟点击或赋值
value→ 浏览器安全限制，完全无效
webkitdirectory 的正确写法和兼容性要点
必须同时满足三个条件才能触发文件夹选择模式：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<input type="file" webkitdirectory directory multiple>——webkitdirectory和directory都要写，multiple建议带上（某些版本 Firefox 要求） - 用户必须在文件选择对话框中**点击左侧导航栏的“文件夹”图标或直接点中文件夹名**（不是双击打开再选里面文件）
- 不能用
display: none隐藏 input，否则 Chrome 会拒绝触发；推荐用opacity: 0+ 绝对定位覆盖按钮
兼容性底线：Safari 完全不支持该属性；IE 系列已淘汰；若需兜底，只能提示用户“请压缩为 ZIP 后上传”，或引入第三方库（如 WebKit-based Electron 封装）。
后端怎么接收带路径的文件
前端提交时，每个 File 对象应以 webkitRelativePath 为 filename 传给后端，例如：
const formData = new FormData();
for (const file of files) {
const path = file.webkitRelativePath || file.name;
formData.append("files", file, path); // 第三个参数是 filename，即服务端收到的原始路径
}
fetch("/upload", { method: "POST", body: formData });
关键点：
- 不要用
formData.append("files", file)省略第三个参数，否则后端只能拿到file.name（即纯文件名，丢失目录结构） - 后端框架（如 Express + multer、Django、Flask）需能解析 multipart 中的
filename字段；multer 默认会丢弃它，得配storage.filename回调手动提取 - 路径中的
/在 HTTP header 里是合法的，但注意后端存储时要做路径净化（防止../../etc/passwd类攻击）
容易被忽略的边界问题
实际落地时最常卡在三处：
- 大文件夹（上万文件）导致
e.target.files构建缓慢甚至卡死 UI —— 应加 loading 状态，并考虑分批处理或限顶层文件数（files.length > 1000就警告） -
webkitRelativePath在 Firefox 中可能返回空，但file.name仍可用；稳妥做法是 fallback 到扁平命名（如foldername_file1.txt） - 用户选中的是挂载网络盘或 OneDrive 同步文件夹 → 浏览器可能报
SecurityError或静默失败，无法预检，只能靠上传后校验响应状态码
真正的难点不在“怎么写那一行 HTML”，而在于如何让路径信息穿过浏览器、HTTP 协议、后端中间件，最终安全落地为可还原的目录树——每层都可能吃掉路径字段，且没有统一错误提示机制。
