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

訪問文件：閱讀和寫作

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

讀取文件：單文件

讀取單個(gè)文件非常簡潔：

令filehandle;

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

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

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

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

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

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

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

讀取多個(gè)文件

要讀取多個(gè)文件，請(qǐng)將選項(xiàng)對(duì)像傳遞給showOpenFilePicker() ：

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

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

  //代碼處理多個(gè)文件（請(qǐng)參閱下文）
};

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

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

處理多個(gè)文件：

 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()打開文件保存對(duì)話框。 handle.createWritable()創(chuàng)建一個(gè)可寫的流， 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（）;
};

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

高級(jí)功能

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

目錄列表

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

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

window.showDirectoryPicker()選擇一個(gè)目錄，循環(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)代瀏覽器中享有廣泛的支持，但請(qǐng)檢查Caniuse.com以獲取最新的兼容性信息。像browser-fs-access一樣的小馬填充可以解決兼容性差距。

資源

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

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

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