ファイルシステムアクセスAPIは、ユーザーのローカルファイルと直接対話するための強(qiáng)力なツールをWeb開発者に提供し、読み取りおよび書き込みアクセスを可能にします。これにより、ブラウザのフロントエンド內(nèi)で、高度なテキストエディター、IDE、畫像操作ツール、インポート/エクスポート機(jī)能の強(qiáng)化など、洗練されたWebアプリケーションを構(gòu)築するためのエキサイティングな可能性が開かれます。このAPIの使用方法を調(diào)べてみましょう。

ファイルへのアクセス：読み書き

ファイルシステムアクセスAPIを使用することの重要な側(cè)面はセキュリティです。すべてのAPI呼び出しは、安全なコンテキスト內(nèi)のユーザージェスチャーによって開始される必要があります。以下の例では、クリックイベントを使用します。

ファイルの読み取り：単一のファイル

単一のファイルを読むことは非常に簡潔です：

 filehandleとします。

document.queryselector（ "。ピックファイル"）。onclick = async（）=> {
  [filehandle] = wait window.showopenfilepicker（）;

  const file = await filehandle.getFile（）;
  const content = await file.text（）;

  コンテンツを返す;
};

クラス「ピックファイル」のHTMLボタンを想定すると、このボタンをクリックするとwindow.showOpenFilePicker()を介してファイルピッカーがトリガーされます。選択したファイルのハンドルは、 fileHandleに保存されます。この関數(shù)は、ファイルのコンテンツをテキストとして返します。

fileHandleオブジェクトは、 kind （「ファイル」または「ディレクトリ」）やnameなどのプロパティを提供します。

 // console.log（filehandle）からの出力の例
filesystemFileHandle {ded： 'file'、name： 'data.txt'}

fileHandle.getFile() Fileの詳細(xì)（最終変更されたタイムスタンプ、名前、サイズ、タイプ）、およびfile.text()を取得し、ファイルのコンテンツを抽出します。

複數(shù)のファイルを読む

複數(shù)のファイルを読み取るには、オプションオブジェクトをshowOpenFilePicker()に渡す：

ファイルハンドルとします。
const options = {倍數(shù)：true};

document.queryselector（ "。ピックファイル"）。onclick = async（）=> {
  filehandles = wait window.showopenfilepicker（options）;

  //複數(shù)のファイルを処理するコード（以下を參照）
};

multipleプロパティ（デフォルト： false ）は、複數(shù)のファイルの選択を有効にします。その他のオプションは、許容可能なファイルタイプを指定します。たとえば、JPEG畫像のみを受け入れるには：

 const options = {
  タイプ：[{説明： "Images"、Accept：{"image/jpeg"： ".jpeg"}}]、
  expludeacceptalloption：true、
};

複數(shù)のファイルの処理：

 const allcontent = await promise.all（
  filehandles.map（async（filehandle）=> {
    const file = await filehandle.getFile（）;
    const content = await file.text（）;
    コンテンツを返す;
  }）
）;

console.log（allcontent）;

ファイルへの書き込み：新しいファイル

新しいファイルへの作成と書き込みも同様に簡単です：

 document.queryselector（ "。save-file"）。onclick = async（）=> {
  const options = {
    タイプ：[{説明： "Test files"、Accept：{"text/plain"：[".txt"]}}]、
  };

  const handle = await window.showsavefilepicker（options）;
  const writable = await handle.createwritable（）;

  writable.write（ "hello world"）;
  whipitable.close（）;

  ハンドルを返します。
};

window.showSaveFilePicker()ファイルの保存ダイアログを開きます。 handle.createWritable() Writable Stream、 writable.write() Write data、およびwritable.close()書き込み操作を完成させます。

既存のファイルの編集

既存のファイルを変更するには：

 filehandleとします。

document.queryselector（ "。ピックファイル"）。onclick = async（）=> {
  [filehandle] = wait window.showopenfilepicker（）;

  const file = await filehandle.getFile（）;
  const writable = await filehandle.createwritable（）;

  writable.write（ "これは新しい行です"）; //ファイルに追加します
  whipitable.close（）;
};

この例はテキストを追加します。上書きするには、目的のコンテンツ全體を書き込みます。

高度な機(jī)能

ファイルシステムアクセスAPIは、ディレクトリリストとファイル/ディレクトリの削除もサポートしています。

ディレクトリリスト

document.queryselector（ "。read-dir"）。onclick = async（）=> {
  const directoryhandle = await window.showdirectorypicker（）;

  await（directoryhandle.values（））のconstエントリ{{
    console.log（entry.kind、entry.name）;
  }
};

window.showDirectoryPicker()ディレクトリを選択し、ループはエントリを繰り返します。

ファイルとディレクトリの削除

ファイルの削除：

 document.queryselector（ "。ピックファイル"）。onclick = async（）=> {
  const [filehandle] = wait window.showopenfilepicker（）;
  await filehandle.remove（）;
};

ディレクトリの削除（再帰的）：

 document.queryselector（ "。ピックフォルダー"）。onclick = async（）=> {
  const directoryhandle = await window.showdirectorypicker（）;
  await directoryhandle.removeentry（ 'data'、{recursive：true}）;
};

ブラウザの互換性

ファイルシステムアクセスAPIは、最新のブラウザ全體で幅広いサポートを享受していますが、Caniuse.comを最新の互換性情報(bào)を確認(rèn)してください。 PonyFill Like browser-fs-access互換性のギャップに対処できます。

リソース

• ファイルシステムアクセスAPI（W3C仕様）
• ファイルシステムアクセスAPI（MDN）
• その他の関連するリソース

この強(qiáng)化された説明は、ファイルシステムアクセスAPIのより包括的で構(gòu)造化されたガイドを提供します。プレースホルダーリンクを関連するドキュメントへの実際のリンクに置き換えることを忘れないでください。

以上がファイルシステムアクセスAPIを開始しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。