HTMLInputElement: thuộc tính webkitdirectory

Giá trị

Một Boolean; true nếu phần tử <input> chỉ cho phép chọn thư mục hoặc false nếu chỉ có thể chọn tệp.

Mô tả

Đặt webkitdirectory thành true khiến phần tử đầu vào cung cấp các thư mục cho người dùng chọn thay vì tệp. Sau khi người dùng chọn một thư mục, mỗi đối tượng File trong files trả về có thuộc tính File.webkitRelativePath được đặt thành đường dẫn tương đối so với thư mục tổ tiên đã chọn. Ví dụ, xem xét hệ thống tệp này:

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

Nếu người dùng chọn thư mục PhotoAlbums, danh sách được báo cáo bởi files sẽ chứa các đối tượng File cho mọi tệp. Mục nhập cho PIC2343.jpg sẽ có webkitRelativePath là PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg. Điều này làm cho việc xác định cấu trúc phân cấp của thư mục đã chọn khả thi mặc dù FileList là phẳng.

Ví dụ

Trong ví dụ này, một bộ chọn thư mục được trình bày cho phép người dùng chọn một hoặc nhiều thư mục. Khi sự kiện change xảy ra, danh sách tất cả các tệp chứa trong các cấu trúc phân cấp thư mục đã chọn được tạo và hiển thị.

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);
  }
});

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

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