ファイルシステムアクセスAPIを開始します-CSSチュートリアル-php.cn

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

William Shakespeare

リリース： 2025-03-14 10:28:10

オリジナル

689 人が閲覧しました

ファイルシステムアクセス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}）;
};

ログイン後にコピー