浏览器为何屏蔽本地文件路径？

在现代浏览器的安全模型下，前端无法直接获取用户本地文件的完整路径，这是出于隐私和安全的核心限制，主要原因是防止恶意网站通过获取文件路径窥探用户的本地文件系统结构（如用户的文件夹组织、个人目录信息等）。

一、核心结论

无法直接获取完整本地路径 ：无论是通过 <input type="file">、拖放（Drag & Drop）还是其他前端 API，浏览器都会对文件路径进行脱敏处理（例如隐藏真实路径，仅保留文件名或虚拟路径）。
仅能获取文件本身的 "引用" ：前端能获取的是 File 对象（或 Blob 对象），该对象包含文件的名称、大小、类型、内容 等信息，但不包含文件在用户本地磁盘上的真实路径（如 C:\Users\XXX\Documents\file.txt）。

二、不同场景下的具体表现

1. 通过 `<input type="file">` 获取文件

这是前端最常用的文件选择方式，但浏览器会主动隐藏真实路径：

复制代码

<input type="file" id="fileInput" onchange="handleFileSelect(event)">
<script>
function handleFileSelect(event) {
  const file = event.target.files[0];
  console.log("文件名：", file.name); // 正常获取（如 "report.pdf"）
  console.log("文件大小：", file.size); // 正常获取（如 102400 字节）
  console.log("文件类型：", file.type); // 正常获取（如 "application/pdf"）
  console.log("完整路径：", file.path); // 关键：仅在 Node.js 环境（如 Electron）中有效，浏览器中返回 undefined 或虚假路径
  console.log("浏览器脱敏路径（旧版）：", event.target.value); // 旧版浏览器可能返回 "C:\fakepath\report.pdf"（fakepath 是虚假路径，无实际意义）
}
</script>

现象：event.target.value 在 Chrome、Firefox 等现代浏览器中仅返回文件名（如 report.pdf），旧版 IE 可能返回 C:\fakepath\report.pdf（fakepath 是浏览器注入的虚假前缀，并非真实路径）。
file.path 属性：仅在 Electron、NW.js 等基于 Node.js 的桌面应用 中有效（因为这类应用突破了浏览器沙箱，允许访问本地文件系统），纯前端浏览器环境中该属性不存在或为 undefined。

2. 通过 "拖放（Drag & Drop）" 获取文件

用户将本地文件拖到浏览器页面时，前端同样只能获取 File 对象，无法获取真实路径：

复制代码

<div id="dropArea" style="width:300px;height:100px;border:1px solid #000;">
  拖放文件到这里
</div>
<script>
const dropArea = document.getElementById("dropArea");
dropArea.addEventListener("drop", (event) => {
  event.preventDefault();
  const file = event.dataTransfer.files[0];
  console.log("文件名：", file.name); // 正常获取
  console.log("真实路径：", file.path); // 浏览器中返回 undefined
});
// 需阻止默认拖放行为（避免浏览器直接打开文件）
dropArea.addEventListener("dragover", (event) => event.preventDefault());
</script>

3. 特殊场景：本地 HTML 文件（`file://` 协议）

如果前端页面是通过本地文件直接打开（协议为 file://，而非 http:// 或 https://），部分浏览器（如旧版 Chrome、Edge）可能会返回真实路径，但这是非标准行为，且存在以下限制：

仅在本地打开文件时生效，通过服务器部署的页面（http 协议）仍会脱敏；
现代浏览器（Chrome 80+、Firefox 70+）已逐步关闭该行为，即使本地打开也仅返回文件名；
兼容性极差，无法作为通用方案。

三、为什么浏览器要限制文件路径获取？

这是浏览器 "沙箱安全模型" 的核心设计：

防止隐私泄露 ：文件路径包含用户的本地目录结构（如 C:\Users\张三\Downloads\），可能暴露用户名、文件夹组织习惯等敏感信息；
避免恶意利用：若恶意网站能获取真实路径，可能结合其他漏洞（如历史漏洞）尝试访问、修改用户本地文件，引发安全风险；
统一跨平台行为 ：不同操作系统（Windows、macOS、Linux）的文件路径格式不同（如 C:\ vs /Users/），隐藏路径可让前端专注于文件内容，无需处理跨平台路径差异。

四、前端的替代方案（需用户主动配合）

如果业务需要 "关联文件路径"（如上传文件时需要记录文件在用户本地的位置），前端唯一可行的方案是让用户主动输入路径：

复制代码

<!-- 让用户手动输入文件路径（需用户自愿提供） -->
<input type="text" placeholder="请输入文件在本地的路径（如 C:\Users\XXX\file.txt）" id="filePathInput">
<input type="file" id="fileInput" onchange="handleFile()">
<script>
function handleFile() {
  const file = document.getElementById("fileInput").files[0];
  const userInputPath = document.getElementById("filePathInput").value;
  // 仅能使用用户主动输入的路径（非浏览器自动获取）
  console.log("用户提供的路径：", userInputPath);
  console.log("文件内容：", file); // 处理文件内容
}
</script>

注意：该方案完全依赖用户自愿输入，且前端无法验证输入路径的真实性（用户可能输入虚假路径）。

五、总结

场景	是否能获取真实路径	浏览器行为
浏览器端（http/https）	❌ 不能	返回文件名或 `fakepath` 虚假路径
本地文件（file://）	❌ 基本不能	现代浏览器仅返回文件名，旧版可能泄露
Electron/NW.js（桌面端）	✅ 能	基于 Node.js 可访问 `file.path`

核心建议 ：前端开发中应放弃 "获取本地文件路径" 的需求设计，转而基于 File 对象处理文件内容（如上传、预览、解析），若需路径信息，只能通过 "用户主动输入" 的方式实现。

浏览器为何屏蔽本地文件路径？

一、核心结论

二、不同场景下的具体表现

1. 通过 <input type="file"> 获取文件

2. 通过 "拖放（Drag & Drop）" 获取文件

3. 特殊场景：本地 HTML 文件（file:// 协议）

三、为什么浏览器要限制文件路径获取？

四、前端的替代方案（需用户主动配合）

五、总结

1. 通过 `<input type="file">` 获取文件

3. 特殊场景：本地 HTML 文件（`file://` 协议）