DataTransferItem: webkitGetAsEntry()-Methode

Syntax

webkitGetAsEntry() 

Parameter

Keine.

Rückgabewert

Ein auf FileSystemEntry basierendes Objekt, das das fallengelassene Element beschreibt. Dies wird entweder ein FileSystemFileEntry oder ein FileSystemDirectoryEntry sein. Die Methode bricht ab und gibt null zurück, wenn das fallengelassene Element keine Datei ist oder wenn das DataTransferItem-Objekt nicht im Lese- oder Lese-/Schreibmodus ist.

Beispiele

In diesem Beispiel wird eine Drop-Zone erstellt, die auf das drop-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 id="dropzone"> <div id="boxtitle">Drop Files Here</div> </div> <h2>Directory tree:</h2> <ul id="listing"></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 rekursive scanFiles()-Funktion. Diese Funktion nimmt als Eingabe ein FileSystemEntry, das einen Eintrag im Dateisystem zum Scannen und Verarbeiten repräsentiert (der item-Parameter), und ein Element, in das die Liste des Inhalts eingefügt werden soll (der container-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 die isDirectory-Eigenschaft des Elements überprüft. Wenn das Element ein Verzeichnis ist, müssen wir in dieses Verzeichnis rekursieren. Der erste Schritt ist die Erstellung eines FileSystemDirectoryReader, um den Verzeichnisinhalt abzurufen. Das geschieht durch Aufrufen der createReader()-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 wird directoryReader.readEntries() aufgerufen, um alle Einträge im Verzeichnis einzulesen. Diese werden jeweils in einem rekursiven Aufruf von scanFiles() 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 das dragover-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 das drop-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 der DataTransferItem-Objekte, die die fallengelassenen Elemente aus event.dataTransfer.items repräsentieren. Dann rufen wir Event.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, indem listing.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 die webkitGetAsEntry()-Methode auf, um ein FileSystemEntry zu erhalten, das die Datei repräsentiert. Wenn das erfolgreich ist, rufen wir scanFiles() 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 und FileSystemDirectoryEntry
• Ereignisse: dragover und drop