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