HTMLInputElement.webkitdirectory là thuộc tính phản ánh thuộc tính HTML và chỉ ra rằng phần tử <input> sẽ cho phép người dùng chọn thư mục thay vì tệp. Khi một thư mục được chọn, thư mục và toàn bộ cấu trúc phân cấp nội dung của nó sẽ được bao gồm trong tập hợp các mục đã chọn. Có thể lấy các mục nhập hệ thống tệp đã chọn bằng cách sử dụng thuộc tính webkitEntries
Ghi chú. Thuộc tính này được gọi là webkitEntries trong thông số kỹ thuật do nguồn gốc của nó là một API dành riêng cho Google Chrome. Nó có khả năng được đổi tên một ngày nào đó Sau khi người dùng thực hiện lựa chọn, mỗi đối tượng 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);
0 trong 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);
1 có thuộc tính 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);
2 được đặt thành đường dẫn tương đối trong thư mục đã chọn chứa tệp. Ví dụ, xem xét hệ thống tập tin này- Album ảnh
- sinh nhật
- Sinh nhật 1 tuổi của Jamie
- PIC1000. jpg
- PIC1004. jpg
- PIC1044. jpg
- Sinh nhật lần thứ 40 của Don
- PIC2343. jpg
- PIC2344. jpg
- PIC2355. jpg
- PIC2356. jpg
- kỳ nghỉ
- Sao Hoả
- PIC5533. jpg
- PIC5534. jpg
- PIC5556. jpg
- PIC5684. jpg
- PIC5712. jpg
Nếu người dùng chọn 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);
3, thì danh sách được báo cáo bởi các tệp sẽ chứa 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);
0 đối tượng cho mọi tệp được liệt kê ở trên—nhưng không chứa các thư mục. Bài dự thi cho 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);
5 sẽ có 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);
6 của 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);
7. Điều này giúp bạn có thể biết thứ bậc mặc dù 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);
8 phẳngGhi chú. Hành vi của 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);
6 khác với Chromium < 72. Xem lỗi này để biết thêm chi tiếtTrong 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 HTMLInputElement.webkitdirectory0 xảy ra, danh sách tất cả các tệp có trong hệ thống phân cấp thư mục đã chọn sẽ được tạo và hiển thị
Làm cách nào để lấy danh sách các tệp trong một thư mục?
Nhấn và giữ phím SHIFT rồi nhấp chuột phải vào thư mục chứa các tệp bạn cần liệt kê . Nhấp vào Mở cửa sổ lệnh tại đây trên menu mới. Một cửa sổ mới có chữ trắng trên nền đen sẽ xuất hiện. o Ở bên trái của con trỏ nhấp nháy, bạn sẽ thấy đường dẫn thư mục mà bạn đã chọn ở bước trước.
Làm cách nào để hiển thị tất cả các tệp trong một thư mục bằng Javascript?
Phương pháp 1. Sử dụng fs.
. js. Nó được sử dụng để đọc nội dung của một thư mục. Nó trả về một mảng đường dẫn tệp, bộ đệm hoặc fs.
Bạn có thể lấy tất cả các tệp từ đường dẫn của thư mục bằng Javascript thuần túy không?
Câu trả lời đơn giản là Không, trong JS từ phía máy khách (trình duyệt) không có cách nào trực tiếp để lấy danh sách tệp trong thư mục/thư mục ở phía máy chủ.
Làm cách nào để tạo tệp HTML chỉ mục?
Để tạo chỉ mục cho một trang web . Tạo một tệp chỉ mục Tạo tệp HTML sẽ chứa chỉ mục của bạn Đặt con trỏ của bạn tại vị trí mà bạn muốn tệp chỉ mục xuất hiện, rồi bấm Trợ giúp HTML Điều khiển ActiveX. . Trong hộp Chỉ định lệnh, bấm vào Chỉ mục, sau đó làm theo hướng dẫn trên màn hình của bạn | 
