HTMLInputElement: webkitdirectory プロパティ

値

論理型で、 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 が平坦でも階層構造を知ることができます。

例

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

HTML

<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></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,
);

結果

仕様書

ブラウザーの互換性

関連情報

• ファイルとディレクトリー項目 API
• HTMLInputElement.webkitEntries
• File.webkitRelativePath