点击无反应主因是用了display:none或visibility:hidden；应改用opacity:0+绝对定位隐藏，并确保input在用户手势同步回调中触发click，webkitdirectory需与directory、multiple共存且仅WebKit/Blink内核支持。
点击 <input type="file"> 无反应，先看是否用了 display: none 或 visibility: hidden
这是最常踩的坑。浏览器对 <input type="file"> 有安全限制：它必须能被用户“感知”到点击行为，display: none 和 visibility: hidden 会让它彻底失效，尤其在 iOS Safari 和部分安卓 WebView 中。
正确隐藏方式是用 opacity: 0 + 绝对定位覆盖在按钮上：
<label class="upload-btn"> 选择文件夹 <input type="file" id="folderInput" webkitdirectory directory multiple style="position: absolute; width: 1px; height: 1px; opacity: 0;"> </label>
- 别用 JS 直接调
.click()，除非它发生在用户手势同步回调里（比如button.addEventListener('click', () => input.click())） - 异步触发（如
setTimeout、Promise.then）会静默失败 -
webkitdirectory属性必须和directory、multiple同时存在才有效
change 事件没触发，检查浏览器是否支持 webkitdirectory
该属性不是标准 HTML 属性，而是 WebKit/Blink 内核专属（Chrome、Edge、新版 Safari 支持；Firefox 不支持，会退化为普通多选）。
可通过以下方式做兼容判断：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const input = document.getElementById('folderInput');
if ('webkitdirectory' in input) {
// 可以启用文件夹选择
} else {
// 提示用户手动多选，或降级为 ZIP 上传
}
- 即使支持，也需确保用户点击的是「文件夹」而非单个文件——系统弹窗里要选中整个文件夹（macOS Finder 里点文件夹图标，Windows 资源管理器里双击进文件夹再点「确定」）
- 某些旧版 Chrome（chrome://flags/#enable-experimental-web-platform-features 才能启用
拿到了 files 却全是根目录文件，没拿到子目录结构
关键看 file.webkitRelativePath —— 它才是带层级的完整路径（如 "project/src/index.js"），而 file.name 只是文件名（"index.js"）。
常见错误是直接遍历 e.target.files 后只取 .name，结果所有文件都“挤”在一层：
for (let file of e.target.files) {
console.log(file.name); // ❌ 错误：丢失路径
console.log(file.webkitRelativePath); // ✅ 正确：保留目录结构
}
- 如果
webkitRelativePath是空字符串，说明用户没选中文件夹本身，而是点了里面某个文件（此时行为等同于普通multiple） - 注意：该字段仅在用户通过文件夹选择器进入并确认后才填充，不能靠 JS 模拟构造
上传后服务端收不到文件，重点查表单 enctype 和后端接收逻辑
文件夹上传本质仍是 multipart/form-data 请求，但后端框架（如 Express、Spring Boot、PHP）默认不递归解析嵌套路径，也不会自动重建目录树。
必须确认：
- 前端表单或
fetch是否设置了enctype="multipart/form-data"（FormData自动处理，但手动拼body会漏） - 后端是否读取了全部
files字段，而不是只取第一个（如 PHP 的$_FILES['file']['name'][0]会丢掉其余） - 服务端是否限制了最大上传数（如 Nginx 的
client_max_body_size或 Spring 的spring.servlet.multipart.max-file-size） - Node.js 的
busboy或multer需显式配置支持多文件，且不能拦截空webkitRelativePath
真正容易被忽略的是：文件夹上传产生的每个 File 对象，在请求体里都是独立的 part，但它们共享同一个字段名（如 file）。后端若只处理第一个 part，剩下的就丢了——这比单文件上传更隐蔽。
