webkitdirectory可启用文件夹选择，但仅Chrome/Edge/Safari 16.4+支持；必须配合type="file"、directory和multiple使用，且依赖webkitRelativePath还原路径，Firefox等不支持。
只用 webkitdirectory 就能选文件夹，但不是所有浏览器都认
现代 Chrome、Edge、新版 Safari（iOS 16.4+）支持 webkitdirectory 属性，加了它用户点击就能直接选整个文件夹，而不是一个个点文件。但 Firefox 和旧版 Safari（包括 iOS 16.3 及更早）完全忽略这个属性，会退化成单文件选择——这不是 bug，是标准未统一导致的兼容性事实。
必须配合 directory 和 multiple 一起写，否则部分浏览器可能不触发递归遍历：
<input type="file" webkitdirectory directory multiple>
-
webkitdirectory是实际起作用的属性，没有它就不可能获取子目录路径 -
directory是 HTML5 标准属性，目前仅作语义补充，但建议保留，未来可能被更多引擎识别 -
multiple不是可选的：即使只选一个文件夹，也必须加，否则e.target.files可能只返回第一个文件（尤其在某些 Edge 版本中）
webkitRelativePath 是唯一能还原目录结构的字段
用户选完文件夹后，e.target.files 返回的是一个 FileList，每个 File 对象自带 webkitRelativePath 属性，比如 "project/src/index.js" 或 "images/logo.png"。这是你重建服务端目录结构的唯一依据——file.name 只有文件名，file.path 在浏览器里根本不可读。
别指望用 File.webkitPath 或 File.fullPath：它们已被废弃或从未标准化，现代浏览器一律返回空字符串或抛错。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 遍历时必须检查
file.webkitRelativePath是否存在，为空时当作根目录文件处理（如直接拖进文件夹根部的README.md） - 如果后端要按路径存文件，前端应把
webkitRelativePath作为额外字段随每个文件一起传，例如用formData.append('path', file.webkitRelativePath) - 注意路径分隔符：Chrome 返回
/，但 Windows 用户本地是\—— 不用转义，服务端统一用/解析即可，Node.js/PHP 都能正常处理
表单 enctype 和后端接收方式必须匹配文件夹上传逻辑
文件夹上传本质仍是多个 File 对象提交，所以表单仍需 enctype="multipart/form-data" 和 method="POST"，这点和普通多文件上传一致。但后端不能当成“一批同名文件”来处理——每个文件的原始路径不同，需要单独解析、单独存储。
- Express + multer：必须用
upload.array('files')（假设 input 的name="files"），而不是.single()或.fields()，否则只拿到第一个 - PHP：
$_FILES['files']['name']是数组，但$_FILES['files']['name'][0]对应第一个文件，$_FILES['files']['tmp_name'][0]才是它的临时路径；必须同步拿到$_POST['paths'][0]（如果你前端传了路径数组）才能关联 - 别漏掉服务端配置：PHP 的
max_file_uploads要调高，否则文件夹里文件一多（比如 50 个），直接被截断；Nginx 还要调client_max_body_size
没有 webkitdirectory 时的 fallback 方案很有限
Firefox 或老 iOS 用户点这个 input，看到的还是单文件选择框。这时候你无法通过 JS “绕过”系统限制去读取文件夹内容——沙箱机制禁止任何非用户显式选择的路径访问。所谓 fallback，只能是体验降级，不是功能补全。
- 可以检测是否支持：
'webkitdirectory' in document.createElement('input')，为不支持的用户显示提示：“请使用 Chrome / Edge 浏览器，或手动压缩文件夹为 ZIP 后上传” - ZIP 上传是目前最可行的兜底：前端用
JSZip解压再逐个提取路径，但要求用户先压缩，且大文件解压易卡死主线程，得用 Web Worker - 千万别在不支持的浏览器里假装实现了文件夹上传——比如只显示“已选 1 个文件夹”，实际只拿到了第一个文件，这会让用户误以为上传成功
真正的难点不在前端怎么写那个 input，而在于后端能否把 webkitRelativePath 和每个上传文件一一对应上，并安全地重建目录层级。路径拼接稍有不慎就可能触发路径遍历（如 ../../etc/passwd），这个校验必须做，而且得在服务端做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
