DOM

：

：

HTMLInputElement.webkitdirectory プロパティ

　編集：2022.11.05 by T.A.

[Edge]。非標準。→、

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

HTMLInputElement の type が file の場合、ファイル取得時にディレクトリーのみを選択するかどうかを論理値で取得／設定します。

HTMLの webkitdirectory 属性を反映しています。

mdn： webkitdirectory という HTML 属性の値を反映し、<input> 要素によってユーザーがファイルの代わりにディレクトリを選択できることを示します。

mdn： ディレクトリが選択された場合、ディレクトリとその内容の階層構造が選択されたアイテムのセットに含まれます。選択されているファイルシステムのファイルアイテムは、webkitEntriesを使用して受け取ることができます。

構文
HTMLInputElement.webkitdirectory
HTMLInputElement HTMLInputElement。
値

論理値。true：ディレクトリーのみを選択します。false：ファイルのみを選択します。

¶省く

例

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

HTML： 

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

JavaScript： 

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);

HTML： 

<INPUT id=IdTest type=file webkitdirectory>

JavaScript： 

D=IdTest.webkitEntries;  //＝[object]：

[アップロード] ボタンが出て、それを押した。

取得はできず、 

DA=IdTest.files;  //＝[object]：[object FileList]
	//0＝[object]：[object File]
	//1＝[object]：[object File]
	//2＝[object]：[object File]
	//3＝[object]：[object File]
	//4＝[object]：[object File]
	//…720個取得できたようです。

files で取得が可能でした。 

IdTest.webkitdirectory=false;

ディレクトリーのみ取得ができないように制御できた。

テスト