開始使用文件系統訪問API

File System Access API為Web開發人員提供了一種功能強大的工具，可直接與用戶的本地文件進行交互，從而啟用讀寫訪問。這為構建複雜的Web應用程序提供了令人興奮的可能性，包括高級文本編輯器，IDE，圖像操作工具以及增強的進出口功能，都在瀏覽器的前端內。讓我們探索如何開始使用此API。

訪問文件：閱讀和寫作

使用文件系統訪問API的一個關鍵方面是安全性。所有API調用都必須在安全上下文中通過用戶手勢啟動。我們將在下面的示例中使用單擊事件。

讀取文件：單文件

讀取單個文件非常簡潔：

令filehandle;

document.queryselector（“。pick-file”）。onclick = async（）=> {
  [fileHandle] =等待窗口。showopenfilepicker（）;

  const file =等待filehandle.getFile（）;
  const content =等待file.text（）;

  返回內容；
};

假設一個帶有“挑選文件”的HTML按鈕，單擊此按鈕會通過window.showOpenFilePicker()觸發文件選擇器。所選文件的句柄存儲在fileHandle中。該功能將文件的內容返回文本。

fileHandle對象提供諸如kind （“文件”或“目錄”）和name屬性。

 //示例從Console.log（fileHandle）輸出
filesystemfilehandle {chink：'file'，name：'data.txt'}

fileHandle.getFile()檢索文件詳細信息（最後修改的時間戳，名稱，大小，類型）和file.text()提取文件的內容。

讀取多個文件

要讀取多個文件，請將選項對像傳遞給showOpenFilePicker() ：

讓filehandles;
const options = {多重：true};

document.queryselector（“。pick-file”）。onclick = async（）=> {
  fileHandles =等待窗口。showopenfilepicker（options）;

  //代碼處理多個文件（請參閱下文）
};

multiple屬性（默認值： false ）啟用多個文件選擇。更多選項指定可接受的文件類型。例如，僅接受JPEG圖像：

 const Options = {
  類型：[{描述：“圖像”，接受：{“ image/jpeg”：“ .jpeg”}}]，
  排除consceptalloption：是的，
};

處理多個文件：

 const allContent =等待承諾
  filehandles.map（async（filehandle）=> {
    const file =等待filehandle.getFile（）;
    const content =等待file.text（）;
    返回內容；
  }））
）；

console.log（allContent）;

寫入文件：新文件

創建和寫入新文件同樣簡單：

 document.queryselector（“。save-file”）。onclick = async（）=> {
  const Options = {
    類型：[{description：“測試文件”，接受：{“ text/plain”：[.txt“]}}}，
  };

  const handle =等待窗口。
  const writable =等待句柄。

  等待Writable.Write（“ Hello World”）;
  等待Writable.Close（）;

  返回手柄；
};

window.showSaveFilePicker()打開文件保存對話框。 handle.createWritable()創建一個可寫的流， writable.write()寫入data和writable.close()最終確定寫操作。

編輯現有文件

修改現有文件：

令filehandle;

document.queryselector（“。pick-file”）。onclick = async（）=> {
  [fileHandle] =等待窗口。showopenfilepicker（）;

  const file =等待filehandle.getFile（）;
  const writable =等待fileHandle.CreateWrrable（）;

  等待writable.write（“這是一條新行”）； //附加到文件
  等待Writable.Close（）;
};

此示例附加文本；要覆蓋，請寫入整個所需的內容。

高級功能

文件系統訪問API還支持目錄列表和文件/目錄刪除。

目錄列表

document.queryselector（“。read-dir”）。
  const directoryhandle =等待窗口.showdirectorypicker（）;

  等待（目錄Handle.Values（）的const條目）{
    console.log（entry.kind，entry.name）;
  }
};

window.showDirectoryPicker()選擇一個目錄，循環通過其條目迭代。

文件和目錄刪除

刪除文件：

 document.queryselector（“。pick-file”）。onclick = async（）=> {
  const [fileHandle] =等待窗口。showopenfilepicker（）;
  等待filehandle.remove（）;
};

刪除目錄（遞歸）：

 document.queryselector（“。pick-folder”）。onclick = async（）=> {
  const directoryhandle =等待窗口.showdirectorypicker（）;
  等待DirectoryHandle.removeentry（'data'，{recursive：true}）;
};

瀏覽器兼容性

文件系統訪問API在現代瀏覽器中享有廣泛的支持，但請檢查Caniuse.com以獲取最新的兼容性信息。像browser-fs-access一樣的小馬填充可以解決兼容性差距。

資源

• 文件系統訪問API（W3C規範）
• 文件系統訪問API（MDN）
• 其他相關資源

這種增強的解釋為文件系統訪問API提供了更全面和結構化的指南。請記住，用與相關文檔的實際鏈接替換佔位符鏈接。

以上是開始使用文件系統訪問API的詳細內容。更多資訊請關注PHP中文網其他相關文章！