HTMLInputElement: webkitdirectory プロパティ

Baseline 2025

Newly available

Since ⁨August 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

メモ:このプロパティは、Google Chrome 固有の API として元々存在していたため、仕様書ではwebkitEntries と呼ばれています。いつか改名される可能性があります。

値

論理型で、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 イベントが発生すると、選択されたディレクトリー階層ないのすべてのファイルを含むリストが生成され、表示されます。

HTML

html

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

JavaScript

document.getElementById("filepicker").addEventListener(  "change",  (event) => {    let output = document.getElementById("listing");    for (const file of event.target.files) {      let item = document.createElement("li");      item.textContent = file.webkitRelativePath;      output.appendChild(item);    }  },  false,);