Wenn das durch denDataTransferItem beschriebene Element eine Datei ist, gibtwebkitGetAsEntry() einFileSystemFileEntry oderFileSystemDirectoryEntry zurück, das es repräsentiert. Wenn das Element keine Datei ist, wirdnull zurückgegeben.

Syntax

webkitGetAsEntry()

Parameter

Keine.

Rückgabewert

Ein aufFileSystemEntry basierendes Objekt, das das fallengelassene Element beschreibt.Dies wird entweder einFileSystemFileEntry oder einFileSystemDirectoryEntry sein.Die Methode bricht ab und gibtnull zurück, wenn das fallengelassene Element keine Datei ist oder wenn dasDataTransferItem-Objekt nicht im Lese- oder Lese-/Schreibmodus ist.

Beispiele

In diesem Beispiel wird eine Drop-Zone erstellt, die auf dasdrop-Ereignis reagiert, indem sie die fallengelassenen Dateien und Verzeichnisse durchsucht und eine hierarchische Verzeichnisliste ausgibt.

HTML

Das HTML etabliert die Drop-Zone selbst, die ein<div>-Element mit der ID"dropzone" und ein ungeordnetes Listen-Element mit der ID"listing" ist.

<p>Drag files and/or directories to the box below!</p><div>  <div>Drop Files Here</div></div><h2>Directory tree:</h2><ul></ul>

CSS

Die in diesem Beispiel verwendeten Stile sind hier gezeigt.

#dropzone {  text-align: center;  width: 300px;  height: 100px;  margin: 10px;  padding: 10px;  border: 4px dashed red;  border-radius: 10px;}#boxtitle {  display: table-cell;  vertical-align: middle;  text-align: center;  color: black;  font:    bold 2em "Arial",    sans-serif;  width: 300px;  height: 100px;}body {  font:    14px "Arial",    sans-serif;}

JavaScript

Zuerst betrachten wir die rekursivescanFiles()-Funktion.Diese Funktion nimmt als Eingabe einFileSystemEntry, das einen Eintrag im Dateisystem zum Scannen und Verarbeiten repräsentiert (deritem-Parameter), und ein Element, in das die Liste des Inhalts eingefügt werden soll (dercontainer-Parameter).

let dropzone = document.getElementById("dropzone");let listing = document.getElementById("listing");function scanFiles(item, container) {  let elem = document.createElement("li");  elem.textContent = item.name;  container.appendChild(elem);  if (item.isDirectory) {    let directoryReader = item.createReader();    let directoryContainer = document.createElement("ul");    container.appendChild(directoryContainer);    directoryReader.readEntries((entries) => {      entries.forEach((entry) => {        scanFiles(entry, directoryContainer);      });    });  }}

scanFiles() beginnt mit der Erstellung eines neuen<li>-Elements, um das zu scannende Element zu repräsentieren, fügt den Namen des Elements als Textinhalt ein und hängt es an den Container an.Der Container ist in diesem Beispiel immer ein Listenelement, wie Sie gleich sehen werden.

Sobald das aktuelle Element in der Liste ist, wird dieisDirectory-Eigenschaft des Elements überprüft.Wenn das Element ein Verzeichnis ist, müssen wir in dieses Verzeichnis rekursieren.Der erste Schritt ist die Erstellung einesFileSystemDirectoryReader, um den Verzeichnisinhalt abzurufen.Das geschieht durch Aufrufen dercreateReader()-Methode des Elements.Dann wird ein neues<ul> erstellt und an die übergeordnete Liste angehängt; dieses wird den Verzeichnisinhalt auf der nächsten Ebene in der Listenhierarchie enthalten.

Danach wirddirectoryReader.readEntries() aufgerufen, um alle Einträge im Verzeichnis einzulesen.Diese werden jeweils in einem rekursiven Aufruf vonscanFiles() verarbeitet.Jede Datei wird in die Liste eingefügt; alle Verzeichnisse werden in die Liste eingefügt und eine neue Hierarchieebene der Liste wird darunter hinzugefügt usw.

Dann kommen die Ereignishandler. Zuerst verhindern wir, dass dasdragover-Ereignis vom Standardhandler behandelt wird, damit unsere Drop-Zone das Ablegen empfangen kann:

dropzone.addEventListener("dragover", (event) => {  event.preventDefault();});

Der Ereignishandler, der alles auslöst, ist natürlich der Handler für dasdrop-Ereignis:

dropzone.addEventListener("drop", (event) => {  let items = event.dataTransfer.items;  event.preventDefault();  listing.textContent = "";  for (const item of items) {    const entry = item.webkitGetAsEntry();    if (entry) {      scanFiles(entry, listing);    }  }});

Diese Funktion holt die Liste derDataTransferItem-Objekte, die die fallengelassenen Elemente ausevent.dataTransfer.items repräsentieren.Dann rufen wirEvent.preventDefault() auf, um zu verhindern, dass das Ereignis weiter behandelt wird, nachdem wir fertig sind.

Jetzt ist es an der Zeit, die Liste zu erstellen. Zuerst wird die Liste geleert, indemlisting.textContent auf leer gesetzt wird.Damit haben wir ein leeres<ul>, um mit der Einfügung von Verzeichniseinträgen zu beginnen.

Dann iterieren wir über die Elemente in der Liste der fallengelassenen Elemente.Für jedes dieser Elemente rufen wir diewebkitGetAsEntry()-Methode auf, um einFileSystemEntry zu erhalten, das die Datei repräsentiert.Wenn das erfolgreich ist, rufen wirscanFiles() auf, um das Element zu verarbeiten—entweder indem es zur Liste hinzugefügt wird, wenn es sich um eine Datei handelt, oder indem es hinzugefügt und hinuntergestiegen wird, wenn es sich um ein Verzeichnis handelt.

Ergebnis

Sie können sehen, wie dies funktioniert, indem Sie es unten ausprobieren. Finden Sie einige Dateien und Verzeichnisse und ziehen Sie sie herein und schauen sich die resultierende Ausgabe an.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• File and Directory Entries API
• DataTransferItem
• FileSystemEntry,FileSystemFileEntry undFileSystemDirectoryEntry
• Ereignisse:dragover unddrop