File: webkitRelativePath プロパティ

File.webkitRelativePath は、webkitdirectory 属性が設定された <input> 要素で、ユーザーが選択したディレクトリーに対するファイルのパスを指定する文字列を持つ読み取り専用のプロパティです。

値

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

例

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

HTML

html

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

JavaScript

js

const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;

  for (const file of files) {
    output.textContent += `${file.webkitRelativePath}\n`;
  }
});

結果

仕様書

Specification
File and Directory Entries API
# dom-file-webkitrelativepath

ブラウザーの互換性

BCD tables only load in the browser

関連情報