非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
HTMLInputElement.webkitDirectory
プロパティで、 webkitdirectory
という HTML 属性の値を反映し、 <input>
要素によってユーザーがファイルの代わりにディレクトリを選択できることを示します。ディレクトリが選択された場合、ディレクトリとその内容の階層構造が選択されたアイテムのセットに含まれます。選択されているファイルシステムのファイルアイテムは、 webkitEntries
を使用して受け取ることができます。
構文
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
- Jamie's 1st birthday
- Vacations
- Mars
- PIC5533.jpg
- PIC5534.jpg
- PIC5556.jpg
- PIC5684.jpg
- PIC5712.jpg
- Mars
- Birthdays
ユーザーが PhotoAlbums
を選択すると、 files によって報告されるリストは上記のすべてのファイルに対する File
オブジェクトを含みます。 — しかし、ディレクトリは含みません。 PIC2343.jpg
のエントリでは webkitRelativePath
が PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg
となりますこれによって FileList
がフラットでも階層構造を知ることができます。
メモ: webkitRelativePath
の挙動は Chromium < 72 では異なります。詳しくはこのバグを参照してください。
例
この例では、ユーザーが1つまたは複数のディレクトリを選択することができるディレクトリピッカーが表示されます。 change
イベントが発生すると、選択されたディレクトリ階層ないのすべてのファイルを含むリストが生成され、表示されます。
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