上传文件时出现 C:\fakepath 是怎么回事

写上传功能时打印一下 input 的值，控制台输出 C:\fakepath\报告.pdf，不少人当场愣住：路径怎么变成假的了，是不是浏览器出问题。其实这是浏览器的安全策略，不是 bug。

为什么要换成 fakepath

早期浏览器会把完整路径交给 JS，网站可以借此读到用户的磁盘目录结构，甚至推测出用户名和文件分布。后来规范改成只保留文件名，路径部分统一替换成 fakepath。Chrome 和现在的 Edge 显示 C:\fakepath\，Firefox 有时只给文件名，IE 老版本才是真实路径。所以这段字符串出现在哪个浏览器都一样，属于正常现象。

正确取值：用 File API

var f = document.querySelector('#file').files[0];
console.log(f.name);   // 文件名
console.log(f.size);   // 字节数
console.log(f.type);   // MIME 类型
var url = URL.createObjectURL(f); // 本地预览

别再用 split('\\') 去切文件名。Windows 是反斜杠，macOS 和 Linux 是正斜杠，靠字符串切割迟早出错，files[0].name 本身就是干净的。

要上传就交给 FormData

var fd = new FormData();
fd.append('file', f);
fetch('/api/upload', { method: 'POST', body: fd });

用 FormData 时不要手动设置 Content-Type，浏览器会自己补上 boundary，手写反而会让后端解析失败。

几个常见疑问

• 能不能拿到真实路径：普通网页拿不到，这是硬限制，不是写法问题。
• 老代码里的切割逻辑：IE8 之前确实给完整路径，那段代码可以删了。
• 兼容写法：先判断 files 是否存在，不支持时再退回 value 取文件名。

看到 fakepath 不用慌，它只是在告诉你：路径不给，文件本身在 files 里。