HTMLInputElement：webkitdirectory 属性
Baseline 2025 Newly available
Since August 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
HTMLInputElement.webkitdirectory 是一个反应了 HTML 属性 webkitdirectory 的属性，其指示 <input> 元素应该让用户选择文件目录而非文件。在选择文件目录后，该目录及其整个内容层次结构将包含在所选项目集内。可以使用 webkitEntries 属性获取选定的文件系统条目。
备注：该属性在规范中被称为 webkitEntries 的原因是，其起源于 Google Chrome 特定的 API。它有可能会被重命名。
值
一个布尔值；如果设置为 true，则 <input> 元素只允许选择目录；如果设置为 false，则只允许选择文件。
理解结果
在用户进行选择后，files 里的每个 File 对象都会将其 File.webkitRelativePath 属性设置为所选目录内文件所在的相对路径。例如，考虑以下文件系统：
- PhotoAlbums
-
Birthdays
-
Jamie's 1st birthday
- PIC1000.jpg
- PIC1004.jpg
- PIC1044.jpg
-
Don's 40th birthday
- PIC2343.jpg
- PIC2344.jpg
- PIC2355.jpg
- PIC2356.jpg
-
-
Vacations
- Mars
- PIC5533.jpg
- PIC5534.jpg
- PIC5556.jpg
- PIC5684.jpg
- PIC5712.jpg
- Mars
-
如果用户选择了 PhotoAlbums，则文件列表上将会包含上面列出的每个文件（而不包含目录）的 File 对象。条目 PIC2343.jpg 的 webkitRelativePath 属性值将会是 PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg。即使 FileList 是扁平的，这也使得知道层次结构成为可能。
备注：在 Chromium < 72 的版本中，webkitRelativePath 的行为表现有所不同。有关更多详细信息，请参见此 bug。
示例
这个示例提供了一个目录选择器，它允许用户选择一个或多个目录。当触发 change 事件时，将生成并显示所选目录层次结构中包含的所有文件的列表。
HTML
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple /> <ul id="listing"></ul> JavaScript
document.getElementById("filepicker").addEventListener( "change", (event) => { let output = document.getElementById("listing"); for (const file of event.target.files) { let item = document.createElement("li"); item.textContent = file.webkitRelativePath; output.appendChild(item); } }, false, ); 结果
规范
| Specification |
|---|
| File and Directory Entries API # dom-htmlinputelement-webkitdirectory |