File 对象中 webkitRelativePath 属性的用途是什么？

Question

如果您在 Chrome 控制台中使用以下简单的方法打印出 File 对象：

<input type="file" onchange="console.info(this.files);" />

您将在其他属性中看到一个始终为空的 webkitRelativePath 属性：

fileName: "07.png"
fileSize: 33022
lastModifiedDate: Date
name: "07.png"
size: 33022
type: "image/png"
webkitRelativePath: ""
__proto__: File

它的目的是什么？以及如何利用它？

Answer 1

在文件输入上使用webkitdirectory 属性时填充：

<input type="file" webkitdirectory>

它仅适用于 Chrome。这允许用户选择文件夹而不是文件，并且递归读取每个文件。 webkitRelativePath 包含文件在层次结构中的相对路径。

有一个演示here。