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

訪問文件：閱讀和寫作

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

讀取文件：單文件

讀取單個文件非常簡潔：

令filehandle;

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

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

  返回內(nèi)容；
};

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

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

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

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

讀取多個文件

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

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

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

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

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

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

處理多個文件：

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

console.log（allContent）;

寫入文件：新文件

創(chuàng)建和寫入新文件同樣簡單：

 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()創(chuàng)建一個可寫的流， writable.write()寫入data和writable.close()最終確定寫操作。

編輯現(xiàn)有文件

修改現(xiàn)有文件：

令filehandle;

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

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

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

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

高級功能

文件系統(tǒng)訪問API還支持目錄列表和文件/目錄刪除。

目錄列表

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

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

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

文件和目錄刪除

刪除文件：

 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}）;
};

瀏覽器兼容性

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

資源

• 文件系統(tǒng)訪問API（W3C規(guī)范）
• 文件系統(tǒng)訪問API（MDN）
• 其他相關(guān)資源

這種增強的解釋為文件系統(tǒng)訪問API提供了更全面和結(jié)構(gòu)化的指南。請記住，用與相關(guān)文檔的實際鏈接替換占位符鏈接。

以上是開始使用文件系統(tǒng)訪問API的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！