DataTransferItem: phương thức getAsFileSystemHandle()
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Phương thức getAsFileSystemHandle() của giao diện DataTransferItem trả về một Promise được hoàn thành với một FileSystemFileHandle nếu mục được kéo là tệp, hoặc được hoàn thành với một FileSystemDirectoryHandle nếu mục được kéo là thư mục.
Cú pháp
getAsFileSystemHandle()
Tham số
Không có.
Giá trị trả về
Một Promise.
Nếu thuộc tính kind của mục là "file" và mục này được truy cập trong trình xử lý sự kiện dragstart hoặc drop, thì promise được trả về sẽ được hoàn thành với một FileSystemFileHandle nếu mục được kéo là tệp hoặc một FileSystemDirectoryHandle nếu mục được kéo là thư mục.
Ngược lại, promise được hoàn thành với null.
Ngoại lệ
Không có.
Ví dụ
Ví dụ này sử dụng phương thức getAsFileSystemHandle() để trả về file handles cho các mục được thả xuống.
Note:
Vì getAsFileSystemHandle() chỉ có thể lấy handle của mục trong cùng tick với trình xử lý sự kiện drop, không được có await trước nó. Đó là lý do tại sao chúng ta gọi getAsFileSystemHandle() đồng bộ cho tất cả các mục trước, sau đó chờ kết quả của chúng đồng thời.
elem.addEventListener("dragover", (e) => {
// Prevent navigation.
e.preventDefault();
});
elem.addEventListener("drop", async (e) => {
// Prevent navigation.
e.preventDefault();
const handlesPromises = [...e.dataTransfer.items]
// kind will be 'file' for file/directory entries.
.filter((x) => x.kind === "file")
.map((x) => x.getAsFileSystemHandle());
const handles = await Promise.all(handlesPromises);
// Process all of the items.
for (const handle of handles) {
if (handle.kind === "file") {
// run code for if handle is a file
} else if (handle.kind === "directory") {
// run code for is handle is a directory
}
}
});
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| File System Access # dom-datatransferitem-getasfilesystemhandle |