DHTML： File.webkitRelativePath プロパティ　 編集：2022.01.13 by T.A.

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

読み取り専用。webkitdirectory 属性が設定された <input> 要素でユーザーが選択したディレクトリーに対するファイルのパスを指定する USVString を持ちます→MS

構文
relativePath = File.webkitRelativePath
File File。
値

ユーザーが選択した祖先ディレクトリーを基準にしたファイルのパスを含む USVString。

例
この例では、ユーザーが 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：

ここに表示
スクリプト組み込み：



スクリプト：


スクリプト：



表示内容：
表示内容：