HTMLInputElement: webkitdirectory 属性

HTMLInputElement.webkitdirectory 是一个属性，它反映了 webkitdirectory HTML 属性，并指示 <input> 元素应该允许用户选择目录而不是文件。当选择一个目录时，该目录及其整个内容层次结构都包含在所选项目集中。可以使用 webkitEntries 属性获取选定的文件系统条目。

注意：由于此属性起源于 Google Chrome 特定的 API，因此在规范中称为 webkitEntries。它可能会在将来被重命名。

值

布尔值；如果 <input> 元素应该只允许选择目录，则为 true；如果应该只允许选择文件，则为 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，则 files 报告的列表将包含上面列出的每个文件的 File 对象，但不包含目录。PIC2343.jpg 的条目将具有 PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg 的 webkitRelativePath。这使得即使 FileList 是扁平的，也可以知道层次结构。

注意：webkitRelativePath 的行为在Chromium < 72 中有所不同。有关更多详细信息，请参阅 此错误。

示例

在此示例中，将显示一个目录选择器，允许用户选择一个或多个目录。当发生 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,
);

结果

规范

规范
文件和目录条目 API
# dom-htmlinputelement-webkitdirectory

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅