What is the purpose of webkitRelativePath property in File object?

问题

If you printout File object in Chrome console with something simple like this:

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

you will see among other properties an always empty webkitRelativePath property:

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

What is it's purpose? And how it can be leveraged?

回答1:

It's populated when using the webkitdirectory attribute on the file input:

<input type="file" webkitdirectory>

It only works in Chrome. This allows a user to select a folder rather than files, and every file is read recursively. The webkitRelativePath contains the relative path of the file within the hierarchy.

There's a demo here.

来源：https://stackoverflow.com/questions/8374135/what-is-the-purpose-of-webkitrelativepath-property-in-file-object