ファイルシステムアクセスAPIを開始します

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

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

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

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

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

 filehandleとします。

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

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

  コンテンツを返す;
};

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

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

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

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

複数のファイルを読む

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

ファイルハンドルとします。
const options = {倍数：true};

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

  //複数のファイルを処理するコード（以下を参照）
};

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

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

複数のファイルの処理：

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

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

高度な機能

ファイルシステムアクセス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を最新の互換性情報を確認してください。 PonyFill Like browser-fs-access互換性のギャップに対処できます。

リソース

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

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

以上がファイルシステムアクセスAPIを開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。