前端安全機制：為何無法獲取 <input type=file> 的本地真實路徑及替代方案

直接回答

瀏覽器安全策略禁止 JavaScript 讀取用戶本地文件絕對路徑。<input type="file"> 的 value 僅返回虛擬路徑（如 C:\fakepath\xxx.jpg），真實路徑不可獲取。

設計初衷

• 防止惡意網頁掃描用戶目錄結構、推測系統信息；
• 避免路徑洩露用戶名、項目結構等隱私；
• 統一跨平台行為（Windows/macOS/Linux 路徑格式差異大）。

實際開發替代方案

1. 圖片預覽（最常見需求）

input.addEventListener('change', e => {
    const file = e.target.files[0];
    if (file) {
        const url = URL.createObjectURL(file); // 臨時 Blob URL
        img.src = url;
        // 用完記得 URL.revokeObjectURL(url) 釋放內存
    }
});

2. 文件上傳

• 直接將 File 對象追加到 FormData，fetch/xhr 發送；
• 服務端接收二進制流，自行生成存儲路徑，無需前端提供本地路徑。

3. 需要路徑字符串的極少數場景

• Electron / Tauri 等桌面端框架可通過 Node.js fs 讀取真實路徑；
• Web 標準下**無解**，請調整產品設計（如讓用戶手動複製粘貼路徑）。

總結

「獲取本地路徑」是偽需求，**請改用 File API + ObjectURL / FormData** 完成預覽與上傳，符合現代 Web 安全模型。