File.webkitRelativePath

非标准

该特性是非标准的,请尽量不要在生产环境中使用它!

File.webkitRelativePath 是只读属性,包含 USVString,它规定了文件的路径,相对于用户在 <input> 元素中选择的目录,这个元素设置了 webkitdirectory 属性。

语法

 relativePath = File.webkitRelativePath

USVString 包含文件路径,相对于用户所选的祖先目录。

示例

这个示例展示了目录选择器,它让用户选择一个或多个目录。change (en-US) 事件触发时,所选目录包含的所有文件的列表,会生成并展示,带有所选目录的层次结构。

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

结果

特别提醒:假设文件路径是 C:\f1\f2\f3\file.txt, 用户选择的是f1 文件夹,则Chrome、Firefox、Edge 都能正确返回  f2/f3/file.txt值。而国产的QQ浏览器、360浏览器、UC浏览器、搜狗浏览器都只能返回 f3/file.txt。也就是国产浏览器调用webkitRelativePath返回的结果都不会是你希望得到的路径,请注意使用时的细微差距。

规范

Specification Status Comment
File and Directory Entries API
webkitRelativePath
Draft Initial specification.

这个 API 没有官方的 W3C 或者 WHATWG 规范。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 13 webkit (en-US) 49 (49) 未实现 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 未实现 0.16 webkit (en-US) 49.0 (49) 未实现 未实现 未实现

另见