File.webkitRelativePath

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

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

構文

 relativePath = File.webkitRelativePath

ユーザーが選択した先祖ディレクトリを基準にしたファイルのパスを含む 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);

結果

仕様

仕様書 ステータス コメント
File and Directory Entries API
webkitRelativePath の定義
ドラフト 初回定義

この API には、公式の W3C または WHATWG 仕様はありません。

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
webkitRelativePathChrome 完全対応 13
接頭辞付き
完全対応 13
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 13Firefox 完全対応 49IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 18
接頭辞付き
完全対応 18
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 49Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

あわせて参照