文件API通過允許用戶在無需服務(wù)器交互的情況下選擇文件并在瀏覽器中選擇文件，從而啟用JavaScript中的客戶端文件處理。 1）文件API包括文件（文件元數(shù)據(jù)），filelist（所選文件列表）和fileReader（讀取文件內(nèi)容）。 2）通常通過選擇文件，并通過文件屬性訪問，該屬性返回filelist。 3）FileReader使用readastext（），readasdataurl（）和readAsarrayBuffer（）（分別用于文本，圖像和二進制數(shù)據(jù)）等方法讀取文件內(nèi)容。 4）示例使用包括圖像預(yù)覽，CSV解析，拖放上傳以及文件類型和大小的客戶端驗證。 5）安全限制確保只能通過用戶操作訪問文件，并且除非使用其他API保存，否則不會在會話之外持久。 6）最佳實踐包括用類型檢查處理多種文件類型，并避免使用大文件的內(nèi)存過載。 7）與畫布或索引的集成增強了調(diào)整或臨時存儲大小的功能。最終，該文件API直接在瀏覽器中直接賦予豐富，安全和有效的文件操作，從而在任何服務(wù)器上傳之前都能實現(xiàn)強大的前端體驗。

起初使用JavaScript中的文件似乎有限 - 畢竟，JS在瀏覽器中運行，出于安全原因，它不能只是讀取您的硬盤驅(qū)動器。但是，由于文件API ，您可以讓用戶選擇文件，然后直接在瀏覽器中使用其內(nèi)容。這打開了功能強大的功能，例如文件預(yù)覽，客戶端驗證，拖放上傳等功能以及更多內(nèi)容，而無需首先將數(shù)據(jù)發(fā)送到服務(wù)器。

這是文件API的工作方式以及如何有效使用它。

文件API是什么？

文件API是一組JavaScript接口，讓W(xué)eb應(yīng)用程序與用戶選擇的文件進行交互。它是現(xiàn)代瀏覽器的一部分，包括以下關(guān)鍵對象：

• File - 一種包含文件信息的特殊Blob （名稱，大小，類型，最后修改）。
• FileList - File對象列表（例如，來自<input type="file"> ）。
• FileReader - 讀取文件的內(nèi)容（文本，二進制，數(shù)據(jù)URL等）。

這些工具允許您在上傳或保存之前訪問和處理客戶端。

從用戶獲取文件

獲取文件的最常見方法是通過<input>元素：

 <input type =“ file” id =“ fileinput”多重>

然后，在JavaScript中：

 const input = document.getElementById（'file -input'）;

input.addeventlistener（'change'，（event）=> {
  const files = event.target.files; // filelist對象
  for（讓i = 0; i <files.length; i）{
    const file =文件[i];
    console.log（&#39;name：&#39;，file.name）;
    console.log（&#39;size：&#39;，file.size，&#39;bytes&#39;）;
    console.log（&#39;type：&#39;，file.type）;
    console.log（&#39;最后修改：&#39;，new Date（file.lastModified））;
  }
}）;

您也可以使用拖放或粘貼事件捕獲文件，但是輸入方法是最簡單的起點。

使用FileReader讀取文件內(nèi)容

擁有File對象后，請使用FileReader讀取其數(shù)據(jù)。

常見方法包括：

• readAsText(file) - 用于文本文件（CSV，JSON等）
• readAsDataURL(file) - 用于圖像（返回base64字符串）
• readAsArrayBuffer(file) - 用于二進制數(shù)據(jù)（音頻，視頻，PDF）

示例：預(yù)覽圖像

const fileinput = document.getElementById（'file -input'）;
const imgpreview = document.getElementById（'preview'）;

fileInput.addeventListener（'change'，（event）=> {
  const file = event.target.files [0];
  if（file && file.type.startswith（'image/'））{
    const Reader = new FileReader（）;

    reader.onload =函數(shù)（e）{
      imgpreview.src = e.target.result; //數(shù)據(jù)URL
      imgpreview.style.display ='block';
    };

    Reader.ReadAsdataurl（file）;
  }
}）;

現(xiàn)在，您可以在上傳之前顯示圖像的預(yù)覽 - 非常適合個人資料圖片或文檔上傳。

處理多個文件和類型

您可以在處理之前驗證文件：

功能processFiles（files）{
  array.from（files）.foreach（file => {
    //跳過如果不是受支持的類型
    如果（！file.type.match（'image。*'）&&！file.type.match（'text。*'））{
      console.warn（'不支持的文件類型：'，file.name）;
      返回;
    }

    const Reader = new FileReader（）;

    reader.onload =（e）=> {
      if（file.type.startswith（'text/'））{
        console.log（'文本內(nèi)容：'，e.target.Result）;
      } else if（file.type.startswith（'image/'））{
        //已經(jīng)通過數(shù)據(jù)URL處理
        console.log（'映像加載：'，file.name）;
      }
    };

    if（file.type.startswith（'text/'））{
      Reader.ReadAstext（file）;
    } 別的 {
      Reader.ReadAsdataurl（file）;
    }
  }）;
}

這樣，您可以適當(dāng)處理不同的文件類型并避免錯誤。

常見用例

• 上傳前的圖像預(yù)覽
• CSV直接在瀏覽器中解析
• 客戶端驗證（文件大小，類型）
• 拖放上載區(qū)域
• 離線文件處理（例如，加密或壓縮數(shù)據(jù)）

您甚至可以將文件API與其他API相結(jié)合，例如畫布（調(diào)整圖像大?。┗騃ndexedDB（臨時存儲文件）。

安全性和限制

• JavaScript無法在用戶系統(tǒng)上訪問任意文件。
• 所有文件訪問都必須是用戶啟動的（例如，通過輸入或拖動）。
• 文件僅在當(dāng)前會話期間可用（例如，通過支持的瀏覽器中的文件系統(tǒng)訪問API）。
• 如果完全讀取內(nèi)存（例如，作為數(shù)據(jù)URL），大文件可能會導(dǎo)致內(nèi)存問題。

因此，盡管功能強大，但文件API尊重用戶隱私和瀏覽器安全性。

在JavaScript中使用文件不再是僅后端任務(wù)。使用文件API，您可以在瀏覽器中創(chuàng)建豐富的響應(yīng)式文件處理經(jīng)驗。這不是魔術(shù) - 僅明智地使用標(biāo)準(zhǔn)網(wǎng)絡(luò)API。

基本上，如果用戶選擇它，則可以閱讀，預(yù)覽它并決定下一步該怎么做 - 在單個字節(jié)擊中您的服務(wù)器之前。

以上是在JavaScript中使用文件：文件API的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！