DataTransferItem：getAsFileSystemHandle() 方法
DataTransferItem 接口的 getAsFileSystemHandle() 方法返回一个 Promise，如果拖动的项是文件，则该 Promise fulfilled 为 FileSystemFileHandle，如果拖动的项是目录，则 fulfilled 为 FileSystemDirectoryHandle。
语法
js
getAsFileSystemHandle()
参数
无。
返回值
如果项的 kind 属性为 "file"，并且在 dragstart 或 drop 事件处理程序中访问此项，那么如果拖动的项是文件，返回的 Promise fulfilled 为 FileSystemFileHandle；如果拖动的项是目录，则 fulfilled 为 FileSystemDirectoryHandle。
否则，Promise fulfilled 为 null。
异常
无。
示例
此示例使用 getAsFileSystemHandle() 方法为拖放的项返回 文件句柄。
注意： 因为 getAsFileSystemHandle() 只能在 drop 事件处理程序的同一个 tick 中检索入口句柄，所以在此之前不能有 await。这就是为什么我们首先同步地为所有项调用 getAsFileSystemHandle()，然后并发等待它们的结果。
js
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
}
}
});
规范
| 规范 |
|---|
| 文件系统访问 # dom-datatransferitem-getasfilesystemhandle |
浏览器兼容性
加载中…