HTMLInputElement.webkitDirectory

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

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
    • Vacations
      • Mars
        • PIC5533.jpg
        • PIC5534.jpg
        • PIC5556.jpg
        • PIC5684.jpg
        • PIC5712.jpg

ユーザーが PhotoAlbums を選択すると、 files によって報告されるリストは上記のすべてのファイルに対する File オブジェクトを含みます。 — しかし、ディレクトリは含みません。 PIC2343.jpg のエントリでは webkitRelativePathPhotoAlbums/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.

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
webkitdirectory
非標準
Chrome 完全対応 13Edge 完全対応 13Firefox 完全対応 50IE 未対応 なしOpera 未対応 なしSafari 完全対応 11.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 50Opera Android 未対応 なしSafari iOS 完全対応 11.3Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。

関連情報