DataTransferItem: getAsFileSystemHandle() Methode
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
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 Methode getAsFileSystemHandle() 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 erfüllt wird, wenn das gezogene Element ein Verzeichnis ist.
Während eines Ziehvorgangs kann diese Methode die Daten nur in den Handlern für die dragstart und drop Ereignisse lesen, da dies die einzigen Zeiten sind, zu denen der Ziehdaten-Speicher lesbar ist. Wenn es von einem anderen Ziehereignis aus aufgerufen wird, gibt es ein Promise zurück, das mit null erfüllt wird. Die Methode muss synchron innerhalb des Ereignishandlers aufgerufen werden, obwohl das Promise später gewartet werden kann. Siehe Lesen des Ziehdaten-Speichers für Details.
Syntax
getAsFileSystemHandle()
Parameter
Keine.
Rückgabewert
Ein Promise.
Wenn die kind Eigenschaft des Elements "file" ist, und dieses Element innerhalb der dragstart oder drop Ereignishandler zugegriffen wird, dann 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
Dateihandles für abgelegte Elemente zurückzugeben.
Hinweis:
Da getAsFileSystemHandle() den Eintragshandles nur im gleichen Takt wie der drop Ereignishandler abrufen kann, darf davor kein await stehen. Aus diesem Grund rufen wir getAsFileSystemHandle() für alle Elemente zuerst synchron auf und warten dann ihre Ergebnisse gleichzeitig ab.
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
| Spezifikation |
|---|
| File System Access # dom-datatransferitem-getasfilesystemhandle |