{{APIRef("HTML DOM")}}{{non-standard_header}}
HTMLInputElement.webkitDirectory プロパティで、 {{htmlattrxref("webkitdirectory", "input")}} という HTML 属性の値を反映し、 {{HTMLElement("input")}} 要素によってユーザーがファイルの代わりにディレクトリを選択できることを示します。ディレクトリが選択された場合、ディレクトリとその内容の階層構造が選択されたアイテムのセットに含まれます。選択されているファイルシステムのファイルアイテムは、 {{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} を使用して受け取ることができます。
HTMLInputElement.webkitdirectory = boolValue
論理型で、 true は {{HTMLElement("input")}} 要素がディレクトリの身を選択することができることを、 false はファイルのみが選択できることを示します。
ユーザーが選択を行った後、 files の中のそれぞれの {{domxref("File")}} オブジェクトは各自が {{domxref("File.webkitRelativePath")}} プロパティセットを持ち、ファイルが所在する位置が選択されたディレクトリの中の相対パスで設定されます。例えば、次のようなファイルシステムを考えてみてください。
ユーザーが PhotoAlbums を選択すると、 files によって報告されるリストは上記のすべてのファイルに対する {{domxref("File")}} オブジェクトを含みます。 — しかし、ディレクトリは含みません。 PIC2343.jpg のエントリでは webkitRelativePath が PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg となりますこれによって {{domxref("FileList")}} がフラットでも階層構造を知ることができます。
メモ: webkitRelativePath の挙動は Chromium < 72 では異なります。詳しくはこのバグを参照してください。
この例では、ユーザーが1つまたは複数のディレクトリを選択することができるディレクトリピッカーが表示されます。 {{event("change")}} イベントが発生すると、選択されたディレクトリ階層ないのすべてのファイルを含むリストが生成され、表示されます。
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple /> <ul id="listing"></ul>
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);
{{ EmbedLiveSample('Example') }}
| 仕様書 | 状態 | 備考 |
|---|---|---|
| {{ SpecName('File System API', '#dom-htmlinputelement-webkitdirectory', 'webkitdirectory') }} | {{ Spec2('File System API') }} | 初回定義 |
This API has no official W3C or WHATWG specification.
{{Compat("api.HTMLInputElement.webkitdirectory")}}