HTML5无法获取上传文件的真实本地路径，这是浏览器基于安全策略的主动限制。可用元数据包括name、size、type、lastModified及createObjectURL生成的预览URL，路径相关属性如path、mozFullPath等均不可用或已废弃。
HTML5 无法获取上传文件的真实本地路径（如 C:\Users\Alice\Pictures\photo.jpg），这是浏览器主动限制的安全策略，不是 API 缺失或写法错误。
为什么 input[type="file"] 的 value 只显示文件名
现代浏览器（Chrome、Firefox、Edge、Safari）会将 input.files[0].name 或 input.value 中的完整路径替换为仅文件名（例如 photo.jpg），或统一显示为 C:\fakepath\photo.jpg。这是 W3C 规范与浏览器安全模型共同决定的——防止网页通过路径推断用户文件系统结构、隐私目录（如 Downloads、Documents）位置。
-
input.value是只读字符串，内容由浏览器控制，不可靠且无标准化格式 -
input.files[0].path在所有主流浏览器中均不存在（不是标准属性） - 即使使用 Electron 或 WebView 场景，也需显式启用沙盒绕过或调用原生模块，不能靠纯 HTML5 实现
能拿到什么：可用的文件元信息有哪些
虽然路径不可得，但 File 对象提供了足够用于上传和预览的元数据：
-
file.name：原始文件名（含扩展名，不含路径） -
file.size：字节大小（可用于限制上传体积） -
file.type：MIME 类型（如image/png，注意可能为空或不准确） -
file.lastModified：最后修改时间戳（毫秒） -
URL.createObjectURL(file)：生成临时内存 URL，可用于<img>预览、音频/视频播放等
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
console.log(file.name); // "report.pdf"
console.log(file.size); // 2456789
console.log(file.type); // "application/pdf"
console.log(file.lastModified); // 1712345678900
const url = URL.createObjectURL(file);
document.getElementById('preview').src = url;
});
常见误操作与替代思路
有人尝试用 webkitRelativePath、mozFullPath 或 FileReader 同步读取路径，这些在当前标准下全部失效或被移除：
立即学习“前端免费学习笔记（深入）”；
-
file.webkitRelativePath：仅在启用webkitdirectory属性且用户选择整个文件夹时存在，值是相对路径（如docs/intro.md），非绝对路径；且 Firefox 不支持 -
file.mozFullPath：Firefox 早年私有属性，已废弃，返回undefined - 试图用
FileReader.readAsText(file)读取路径？不行——它读的是文件内容，不是路径 - 服务端解析
Content-Disposition头？HTTP 协议不强制传送原始路径，绝大多数服务器（包括 Express、Nginx、Apache 默认配置）根本不会收到路径信息
真正需要“路径”的场景该怎么处理
如果业务逻辑确实依赖路径（比如按目录结构归档、校验同名文件是否已存在），必须换设计思路：
- 前端可让用户手动输入分类标签、项目 ID 或选择预设目录（下拉菜单），代替真实路径
- 后端接收文件时，根据
file.name+ 时间戳 + 用户 ID 生成唯一存储路径，如/uploads/u123/20240405/photo_abc123.jpg - 若需保留原始层级（如 ZIP 解压上传），应要求用户上传 ZIP 包，服务端解压并记录内部路径——路径信息此时来自压缩包元数据，而非浏览器
安全限制不是 bug，是 feature。接受它，才能写出稳定、跨浏览器、不被未来版本突然打断的文件上传逻辑。
