浏览器禁止通过event.dataTransfer.files获取文件系统路径，file.name仅返回纯文件名（如"report.pdf"），不包含任何目录信息；所有现代浏览器均遵循此安全规范，无法绕过。
event.dataTransfer.files 只提供 File 对象，不暴露文件系统路径 —— 浏览器出于安全限制，**根本不会返回相对路径或绝对路径**。所谓“获取相对路径”是个常见误解，实际能拿到的只有文件名、大小、类型和内容。
为什么 file.name 不等于相对路径
用户从桌面拖一个 ./projects/report.pdf 进来，e.dataTransfer.files[0].name 仅返回 "report.pdf"，前面的目录结构被浏览器主动剥离。这是规范强制行为（W3C File API），不是 bug，也无法绕过。
- 所有现代浏览器（Chrome/Firefox/Safari/Edge）均如此，无例外
-
File对象的webkitRelativePath属性曾短暂存在，但已被 Chrome 86+ 废弃，Firefox 从未支持，Safari 未实现 - 试图读取
input.files[0].path或file.fullPath会得到undefined或报错
真正可用的替代方案：用 file.name 拼接逻辑路径
如果业务需要“模拟相对路径”（比如上传时保留原始目录层级），只能靠前端约定 + 后端配合。例如用户拖入多个文件，你通过 file.name 和用户手动选择的“根目录标识”组合出逻辑路径：
- 让用户先在界面上选一个“项目名”或“模块名”，比如输入
"dashboard" - 再拖入文件
config.json、assets/logo.png（注意：后者只是文件名，不含目录） - 前端将两者拼为
"dashboard/config.json"、"dashboard/assets/logo.png"，作为FormData的字段名或额外参数传给后端 - 后端据此在存储时还原目录结构
常见错误：误以为 input.files[0].name 包含路径
写成这样是无效的：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
const file = e.dataTransfer.files[0];
console.log(file.name); // ✅ 输出 "photo.jpg"
console.log(file.name.split('/')[0]); // ❌ 期望得到 "uploads"？实际永远只是文件名
原因：file.name 是纯文件名字符串，不带任何斜杠。即使用户拖的是 /home/user/docs/file.txt，你也只拿到 "file.txt"。
如果你看到某段代码里出现了 file.webkitRelativePath，请立刻检查运行环境 —— 它只在极旧版 Chrome（≤85）且启用 chrome://flags/#enable-experimental-web-platform-features 时才可能生效，生产环境不可依赖。
总结一句
HTML 拖拽中不存在“获取相对路径”这回事；能稳定拿到的只有 file.name、file.size、file.type 和二进制内容。任何路径语义都得靠业务层自己定义和维护，浏览器不参与、也不允许。
