你有使用過FileReader嗎？說說它有哪些應用場景？

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

FileReader 是一個 JavaScript API，用於在瀏覽器中非同步讀取檔案內容。它允許 Web 應用程式直接與使用者的檔案系統互動（在使用者授權的情況下）。

FileReader 的主要應用場景包括：

  • 預覽圖片: 使用者選擇圖片檔案後，可以使用 FileReader 讀取檔案內容並將其顯示在 <img> 標籤中，實現圖片上傳前的預覽功能。這是 FileReader 最常見的應用場景之一。

  • 處理文字檔案: 讀取文字檔案內容，例如 .txt、.csv、.json 等，以便在 JavaScript 中進行處理、分析或顯示。例如，可以讀取 CSV 檔案並將其轉換為 JavaScript 陣列或物件，或者讀取 JSON 檔案並將其解析為 JavaScript 物件。

  • 搜尋檔案內容: 讀取檔案內容並在其中搜尋特定字串或模式。

  • 讀取二進位制檔案: FileReader 可以讀取任意型別的檔案，包括二進位制檔案，例如影像、音訊、影片等。讀取後的二進位制資料可以用於各種用途，例如影像處理、音訊解碼、影片播放等。 可以使用 readAsArrayBuffer() 來獲取二進位制資料。

  • 自定義檔案上傳進度: 結合 XMLHttpRequest 或 Fetch API，可以使用 FileReader 讀取檔案塊並在上傳過程中計算和顯示上傳進度。

  • 客戶端資料處理: 在客戶端處理檔案資料，減少伺服器負載。例如，可以在客戶端對圖片進行壓縮或裁剪後再上傳到伺服器。

  • 實現拖放上傳: 配合拖放 API，可以實現將檔案拖放到網頁上進行上傳的功能。

一些具體的例子:

  • 圖片預覽:
const input = document.getElementById('fileInput');
const img = document.getElementById('previewImg');

input.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    img.src = e.target.result;
  };

  reader.readAsDataURL(file);
});
  • 讀取文字檔案:
const input = document.getElementById('fileInput');

input.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const content = e.target.result;
    console.log(content); // 顯示檔案內容
  };

  reader.readAsText(file);
});

總而言之，FileReader 提供了一種方便的方式在前端處理檔案，提升使用者體驗，並減少伺服器負載。需要注意的是，為了安全起見，FileReader 只能訪問使用者明確選擇的檔案。

相關文章