File: webkitRelativePath プロパティ

Baseline 2025

Newly available

Since August 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

メモ: この機能はウェブワーカー内で利用可能です。

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

値

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

例

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

HTML

html
<input type="file" id="file-picker" name="fileList" webkitdirectory multiple />
<output id="output"></output>

output {
  display: block;
  white-space: pre-wrap;
}

JavaScript

js
const output = document.getElementById("output");
const filePicker = document.getElementById("file-picker");

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

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年11月7日 by MDN contributors.

View this page on GitHub • Report a problem with this content

File: webkitRelativePath プロパティ

In this article

値

例

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN