DataTransferItem: getAsFileSystemHandle() Methode
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die getAsFileSystemHandle() Methode des DataTransferItem Interfaces gibt ein Promise zurück, das mit einem FileSystemFileHandle erfüllt wird, wenn das gezogene Element eine Datei ist, oder mit einem FileSystemDirectoryHandle, wenn das gezogene Element ein Verzeichnis ist.
Syntax
getAsFileSystemHandle()
Parameter
Keine.
Rückgabewert
Ein Promise.
Wenn die kind Eigenschaft des Elements "file" ist und dieses Element in den Event-Handlern dragstart oder drop aufgerufen wird, wird das zurückgegebene Promise mit einem FileSystemFileHandle erfüllt, wenn das gezogene Element eine Datei ist, oder mit einem FileSystemDirectoryHandle, wenn das gezogene Element ein Verzeichnis ist.
Andernfalls wird das Promise mit null erfüllt.
Ausnahmen
Keine.
Beispiele
Dieses Beispiel verwendet die getAsFileSystemHandle() Methode, um
Datei-Handles für abgelegte Elemente zurückzugeben.
Hinweis:
Da getAsFileSystemHandle() den Eintragshandle nur im gleichen Tick wie der drop Ereignis-Handler abrufen kann, darf davor kein await stehen. Deshalb rufen wir getAsFileSystemHandle() zuerst synchron für alle Elemente auf und warten dann gleichzeitig auf ihre Ergebnisse.
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
}
}
});
Spezifikationen
| Specification |
|---|
| File System Access # dom-datatransferitem-getasfilesystemhandle |
Browser-Kompatibilität
Loading…