HTMLInputElement.webkitDirectory

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

HTMLInputElement.webkitDirectory プロパティで、 webkitdirectory という HTML 属性の値を反映し、 <input> 要素によってユーザーがファイルの代わりにディレクトリを選択できることを示します。ディレクトリが選択された場合、ディレクトリとその内容の階層構造が選択されたアイテムのセットに含まれます。選択されているファイルシステムのファイルアイテムは、 webkitEntries (en-US) を使用して受け取ることができます。

構文

 HTMLInputElement.webkitdirectory = boolValue

値

論理型で、 true は <input> 要素がディレクトリの身を選択することができることを、 false はファイルのみが選択できることを示します。

結果を理解する

ユーザーが選択を行った後、 files の中のそれぞれの File オブジェクトは各自が File.webkitRelativePath プロパティセットを持ち、ファイルが所在する位置が選択されたディレクトリの中の相対パスで設定されます。例えば、次のようなファイルシステムを考えてみてください。

PhotoAlbums
- Birthdays
  - Jamie's 1st birthday
    - PIC1000.jpg
    - PIC1004.jpg
    - PIC1044.jpg
  - Don's 40th birthday
    - PIC2343.jpg
    - PIC2344.jpg
    - PIC2355.jpg
    - PIC2356.jpg
- Vacations
  - Mars
    - PIC5533.jpg
    - PIC5534.jpg
    - PIC5556.jpg
    - PIC5684.jpg
    - PIC5712.jpg

ユーザーが PhotoAlbums を選択すると、 files によって報告されるリストは上記のすべてのファイルに対する File オブジェクトを含みます。 — しかし、ディレクトリは含みません。 PIC2343.jpg のエントリでは webkitRelativePath が PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg となりますこれによって FileList がフラットでも階層構造を知ることができます。

メモ: webkitRelativePath の挙動は Chromium < 72 では異なります。詳しくはこのバグを参照してください。

例

この例では、ユーザーが1つまたは複数のディレクトリを選択することができるディレクトリピッカーが表示されます。 change (en-US) イベントが発生すると、選択されたディレクトリ階層ないのすべてのファイルを含むリストが生成され、表示されます。

HTML content

<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>

JavaScript content

document.getElementById("filepicker").addEventListener("change", function(event) {
  let output = document.getElementById("listing");
  let files = event.target.files;

  for (let i=0; i<files.length; i++) {
    let item = document.createElement("li");
    item.innerHTML = files[i].webkitRelativePath;
    output.appendChild(item);
  };
}, false);

結果

仕様書

仕様書	状態	備考
File and Directory Entries API webkitdirectory の定義	ドラフト	初回定義

This API has no official W3C or WHATWG specification.

ブラウザーの互換性

BCD tables only load in the browser