File API的核心功能與示例

獲取文件基本信息

通過File API，可以輕松獲取文件的名稱、大小和類型等基本信息。以下是一個示例代碼及其輸出：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  console.log(File Name: ${file.name}, File Size: ${file.size} bytes, File Type: ${file.type});
});

輸出：

File Name: example.txt, File Size: 1234 bytes, File Type: text/plain

通過上述代碼，用戶上傳文件后，系統會立即顯示文件的基本信息。

讀取文件內容

FileReader接口允許開發者讀取文件的內容。以下是一個讀取文件內容的示例：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    console.log(e.target.result);
  };
  reader.readAsText(file);
});

輸出：

Hello, this is the content of the file.

在這個示例中，用戶上傳文件后，文件的文本內容會被讀取并顯示在控制臺中。

創建文件的URL

通過URL.createObjectURL方法，可以為文件生成一個臨時的URL，方便在瀏覽器中直接訪問文件內容。例如：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const fileURL = URL.createObjectURL(file);
  console.log(File URL: ${fileURL});
});

輸出：

File URL: blob:http://example.com/12345678-90ab-cdef-1234-567890abcdef

生成的URL可以用于在頁面中顯示文件內容，例如圖片或視頻。

總結

JavaScript中的File API為Web開發者提供了一套強大的工具，用于直接在瀏覽器中處理文件。通過使用諸如File、FileReader、Blob等接口，以及URL.createObjectURL方法，開發者可以構建出與本地文件無縫交互的高效Web應用程序。這不僅能顯著提升用戶體驗，還能有效降低服務器的負擔。

通過深入理解和靈活運用這些方法，您可以為Web應用程序添加豐富的文件處理功能，使其更加交互性強且用戶友好。

原文鏈接: https://medium.com/@vk.vishalkora/understanding-the-file-api-in-javascript-a-simple-guide-2c8d7d5c8540