DOM

：

：

Window.showOpenFilePicker() メソッド

　編集：2022.09.15 by T.A.

[Edge]。実験的。→、

セキュア コンテキスト： この機能は、セキュア コンテキスト（HTTPS）でのみ使用できます。一部またはすべての対応ブラウザで。

実験的： これは実験的な技術です。これを本番環境で使用する前に、ブラウザーの互換性テーブルを注意深く確認してください。

ユーザーが 1 つまたは複数のファイルを選択できるファイル ピッカーを表示し、ファイルのハンドルを返します。

構文
Window.showOpenFilePicker([options])
Window Window オブジェクト。
options 省略可。オプションを含むオブジェクト：
プロパティと意味：
multiple
ブール値。true に設定すると、複数のファイルを選択できます。初期値 false。
excludeAcceptAllOption
ブール値。初期値 false。

false では、ピッカーには、ファイル タイプ フィルタを適用しないオプションが含まれている必要があります（以下のタイプ オプションによって引き起こされます）。true では、以下のオプションが使用できないことを意味します。

types
選択できるファイル タイプとする配列で、以下のオブジェクトを含める。
プロパティ意味
description 値は文字列。許可されるファイル タイプのカテゴリのオプションの説明する。
accept 値はオブジェクトで、キー（プロパティ）が MIME タイプ文字列として、その値は拡張子の文字列の配列を指定する（例を参照）。
戻り値

フル フィルメント ハンドラーが FileSystemFileHandle オブジェクトの配列を受け取る Promise。

例外
AbortError
ユーザーが選択を行わずにプロンプトを閉じた場合、または選択したファイルが機密性が高すぎて Web サイトに公開するには危険であると見なされた場合、AbortError がスローされます。
例

ここでは、メソッドに渡すオプション オブジェクトを設定します。画像ファイルの種類を選択できます。すべてのファイル タイプを許可するオプションがないため、または複数のファイル選択。 

const pickerOpts = {
  types: [
    {
      description: 'Images',
      accept: {
        'image/*': ['.png', '.gif', '.jpeg', '.jpg']
      }
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false
};

次に、ファイル ピッカーを表示し、選択したファイルを返す非同期関数を作成できます。 

// create a reference for our file handle
let fileHandle;

async function getFile() {
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}
テスト