html - 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包含层次结构中文件的相对路径。

这里有一个演示。