HTMLInputElement:webkitdirectory 属性

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

如果用户选择了 PhotoAlbums,则文件列表上将会包含上面列出的每个文件(而不包含目录)的 File 对象。条目 PIC2343.jpgwebkitRelativePath 属性值将会是 PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg。即使 FileList 是扁平的,这也使得知道层次结构成为可能。

备注:Chromium < 72 的版本中,webkitRelativePath 的行为表现有所不同。有关更多详细信息,请参见此 bug

示例

这个示例提供了一个目录选择器,它允许用户选择一个或多个目录。当触发 change 事件时,将生成并显示所选目录层次结构中包含的所有文件的列表。

HTML

html
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>

JavaScript

js
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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
webkitdirectory

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Has more compatibility info.

参见