直接click()无法触发文件夹选择框，因浏览器安全策略禁止JS自动调用input[type="file"]的click()，即使添加webkitdirectory属性也无效；正确方式是通过label绑定或透明覆盖input元素，由用户真实点击触发。
为什么直接 click() 无法触发文件夹选择框
因为浏览器安全策略禁止非用户手势（如 JS 自动调用 click()）唤起 ，哪怕加了 webkitdirectory 也一样。常见错误是：给按钮绑 onclick，里面写 fileInput.click()，结果在 Chrome/Firefox 中静默失败，控制台无报错但没反应。
webkitdirectory 的正确写法和兼容性限制
它只能用于 元素，且必须由真实用户点击触发——不能靠 JS 模拟。支持情况很窄：
- Chrome / Edge（基于 Chromium）完全支持
- Safari 从 16.4+ 开始支持
webkitdirectory，但需开启实验性功能 - Firefox 不支持该属性，会忽略；IE 完全不识别
示例写法：
<input type="file" id="folderInput" webkitdirectory directory multiple>
注意三个关键点：webkitdirectory、directory、multiple 缺一不可，否则只选单个文件或报错。
如何让按钮真正“触发”文件夹选择
核心原则：按钮本身必须是用户点击目标，且与 input 有显式绑定关系。推荐两种可靠方式：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
包裹按钮，for值匹配input的id - 把
input设置为opacity: 0; position: absolute;叠在按钮上，保持尺寸对齐，不使用display: none或visibility: hidden（这会让click()失效） - 监听
change事件时，检查event.target.webkitRelativePath是否存在，可判断是否为文件夹内文件（仅 Chrome/Edge 有效）
选中后怎么区分文件和文件夹路径
webkitdirectory 实际上传的是文件列表，不是“文件夹对象”。每个 File 对象的 webkitRelativePath 字段包含相对路径（如 "docs/readme.md"），空字符串表示根目录文件。但这个字段只在 Chromium 系列中存在，Firefox 返回 undefined。
所以服务端接收时，不能依赖前端传来的“文件夹名”，而应根据 File.name 和 webkitRelativePath（如有）拼出完整路径结构。例如：
const files = event.target.files;
for (let file of files) {
const path = file.webkitRelativePath || file.name;
console.log('上传路径:', path); // "project/src/index.js" 或 "README.md"
}
真正容易被忽略的一点：即使用户选中一个空文件夹，files.length 仍为 0 —— 浏览器不会上传任何东西，前端也无法感知“空文件夹被选中”这件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
