Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
DataTransferItem: Methode getAsFile()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2016 browserübergreifend verfügbar.
Die Methode getAsFile() der Schnittstelle DataTransferItem gibt das File-Objekt des Drag-Datenelements zurück, wenn das Element eine Datei ist. Wenn das Element keine Datei ist, gibt diese Methode null zurück.
Während eines Drag-Vorgangs kann diese Methode Daten nur in den Handlern für die Ereignisse dragstart und drop lesen, da dies die einzigen Zeitpunkte sind, zu denen der Drag-Datenspeicher lesbar ist. Der Aufruf bei einem anderen Drag-Ereignis gibt null zurück. Weitere Informationen finden Sie unter Lesen des Drag-Datenspeichers.
Syntax
getAsFile()
Parameter
Keine.
Rückgabewert
Wenn das Drag-Datenelement eine Datei ist, wird ein File-Objekt zurückgegeben; andernfalls wird null zurückgegeben.
Beispiele
Dieses Beispiel zeigt die Verwendung der Methode getAsFile() in einem Event-Handler für drop.
function dropHandler(ev) {
console.log("Drop");
ev.preventDefault();
for (const item of ev.dataTransfer.items) {
if (item.kind === "string" && item.type === "text/plain") {
// This item is the target node
item.getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (item.kind === "string" && item.type === "text/html") {
// Drag data item is HTML
console.log("… Drop: HTML");
} else if (item.kind === "string" && item.type === "text/uri-list") {
// Drag data item is URI
console.log("… Drop: URI");
} else if (item.kind === "file" && item.type.startsWith("image/")) {
// Drag data item is an image file
const f = item.getAsFile();
console.log("… Drop: File");
}
}
}
Spezifikationen
| Spezifikation |
|---|
| HTML> # dom-datatransferitem-getasfile-dev> |