能否正確獲取本地上傳的檔案路徑？如果可以怎麼做？如果不可以解釋下為什麼？

王铁柱6發表於2024-11-25

在前端開發中，出於安全考慮，JavaScript 程式碼不能直接獲取使用者本地上傳檔案的完整路徑。瀏覽器會對檔案路徑進行遮蔽，只提供檔名和檔案型別等基本資訊。這是為了防止惡意網站竊取使用者電腦上的敏感資訊。

如果嘗試使用 input type="file" 元素的 value 屬性獲取路徑，你只會得到一個偽路徑，例如 C:\fakepath\filename.txt。這個路徑並非檔案的真實路徑，它是由瀏覽器生成的，用於保護使用者隱私。

那麼，如何在前端處理使用者上傳的檔案呢？

正確的方法是使用 File API。透過 File API，你可以訪問檔案的內容，而無需知道其在使用者電腦上的完整路徑。以下是一個簡單的示例：

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0]; // 獲取第一個上傳的檔案

  if (file) {
    console.log('檔名:', file.name);
    console.log('檔案型別:', file.type);
    console.log('檔案大小:', file.size);

    // 讀取檔案內容 (例如，使用 FileReader API)
    const reader = new FileReader();
    reader.onload = (e) => {
      const fileContent = e.target.result;
      console.log('檔案內容:', fileContent);
      // 在這裡處理檔案內容，例如上傳到伺服器
    };
    reader.readAsText(file); // 可以根據檔案型別選擇不同的讀取方式，如readAsDataURL() for images
  }
});

<input type="file" id="fileInput">

在這個例子中，我們透過 event.target.files 獲取了上傳的檔案列表，並使用 File 物件的屬性獲取檔名、型別和大小。然後，使用 FileReader API 讀取檔案內容。

總結:

  • 不能直接獲取完整路徑: 瀏覽器出於安全原因禁止 JavaScript 直接訪問本地檔案路徑。
  • 使用 File API: 使用 File API 可以訪問檔案內容和一些基本資訊，而無需知道完整路徑。 這是處理使用者上傳檔案的正確方法。

希望這個解釋能夠解答你的疑問。

相關文章