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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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()

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");
    }
  }
}