HTMLInputElement: webkitdirectory 属性

值

一个布尔值；如果 <input> 元素应该只允许选择目录，则为 true；如果只应选择文件，则为 false。

描述

将 webkitdirectory 设置为 true 会导致输入元素向用户提供目录供选择，而不是文件。用户选择目录后，返回的 files 中的每个 File 对象的 File.webkitRelativePath 属性都会设置为相对于所选祖先目录的路径。例如，考虑以下文件系统：

PhotoAlbums
├── Birthdays
│   ├── Jamie's 1st birthday
│   │   ├── PIC1000.jpg
│   │   └── PIC1044.jpg
│   └── Don's 40th birthday
│       ├── PIC2343.jpg
│       └── PIC2356.jpg
└── Vacations
    └── Mars
        ├── PIC5556.jpg
        ├── PIC5684.jpg
        └── PIC5712.jpg

如果用户选择 PhotoAlbums 目录，则文件列表将包含每个文件的 File 对象。PIC2343.jpg 的条目将具有 webkitRelativePath PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg。这使得即使 FileList 是扁平的，也可以确定选定目录的层级结构。

示例

在此示例中，将显示一个目录选择器，允许用户选择一个或多个目录。当发生 change 事件时，将创建并显示所选目录层级结构中所有文件的列表。

HTML

<input type="file" id="file-picker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>

JavaScript

document.getElementById("file-picker").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);
  }
});

结果

规范

浏览器兼容性

另见

• File and Directory Entries API
• HTMLInputElement.webkitEntries
• File.webkitRelativePath