檔案 API - Web API | MDN

概念與用法

檔案 API 使 Web 應用程式能夠訪問檔案及其內容。

當用戶透過檔案 <input> 元素或拖放方式提供檔案時，Web 應用程式可以訪問這些檔案。

以這種方式提供的一組檔案用 FileList 物件表示，該物件使 Web 應用程式能夠檢索單個 File 物件。反過來，File 物件提供了對元資料（如檔名、大小、型別和最後修改日期）的訪問。

File 物件可以傳遞給 FileReader 物件，以訪問檔案的內容。FileReader 介面是非同步的，但 FileReaderSync 介面提供了同步版本，僅在 Web Workers 中可用。

與其他檔案相關 API 的關係

還有兩個其他主要 API 也處理檔案：檔案和目錄條目 API 和檔案系統 API。

檔案 API 是最基礎的一個。它支援讀取和處理使用者透過表單元素輸入或拖放操作顯式提供的檔案資料。它還支援透過 Blob 進行二進位制資料處理。

檔案和目錄條目 API 與檔案 API 一樣，也處理使用者透過表單輸入或拖放操作提供的檔案。但是，輸入元素現在允許選擇一個目錄或多個檔案，而不是單個檔案。然後，API 提供了一種處理目錄或檔案的方法。它主要是 Chrome 自己發明的——你會發現它對其他介面的擴充套件都帶有 webkit 字首。檔案和目錄條目 API 在其實現和標準化方面有一個更完整的故事。它最初旨在支援一個完整的虛擬檔案系統，但現在只支援對使用者提供的資料進行讀取操作。

檔案系統 API 為 Web 應用程式提供了一個虛擬檔案系統，以便它們可以將資料持久儲存在僅屬於文件源（稱為源私有檔案系統 (OPFS)）的虛擬系統中。檔案系統訪問 API 進一步擴充套件了檔案系統 API，允許網站在獲得使用者同意的情況下讀取和寫入使用者檔案。與檔案 API 和檔案和目錄條目 API 不同，檔案系統 API 完全是 JavaScript，不處理表單輸入。

介面

Blob: 表示“二進位制大物件”，意味著一個類檔案物件，包含不可變的原始資料；Blob 可以作為文字或二進位制資料讀取，或者轉換為 ReadableStream，以便可以使用其方法來處理資料。
File: 提供有關檔案的資訊，並允許網頁中的 JavaScript 訪問其內容。
FileList: 由 HTML <input> 元素的 files 屬性返回；這允許你訪問使用 <input type="file"> 元素選擇的檔案列表。它還用於使用拖放 API 拖放到 Web 內容中的檔案列表；有關此用法的詳細資訊，請參閱 DataTransfer 物件。
FileReader: 使 Web 應用程式能夠非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用 File 或 Blob 物件來指定要讀取的檔案或資料。
FileReaderSync: 使 Web 應用程式能夠同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用 File 或 Blob 物件來指定要讀取的檔案或資料。

其他介面的擴充套件

URL.createObjectURL(): 建立一個可用於獲取 File 或 Blob 物件的 URL。
URL.revokeObjectURL(): 釋放一個已存在的物件 URL，該 URL 是之前透過呼叫 URL.createObjectURL() 建立的。

示例

讀取檔案

在此示例中，我們提供了一個檔案 <input> 元素，當用戶選擇檔案時，我們將第一個選定檔案的內容讀取為文字，並將結果顯示在一個 <div> 中。

HTML

html

<input type="file" />
<div class="output"></div>

CSS

css

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", async () => {
  const [file] = fileInput.files;

  if (file) {
    output.innerText = await file.text();
  }
});