HTML文件拖拽怎么获取相对路径-html教程-PHP中文网

浏览器禁止通过event.dataTransfer.files获取文件系统路径，file.name仅返回纯文件名（如"report.pdf"），不包含任何目录信息；所有现代浏览器均遵循此安全规范，无法绕过。

html文件拖拽怎么获取相对路径

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 DHTML 页面生成器

生成可在 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 时才可能生效，生产环境不可依赖。