DataTransferItem: webkitGetAsEntry() Methode

Keine.

Ein auf FileSystemEntry basierendes Objekt, das das fallen gelassene Element beschreibt. Dies wird entweder FileSystemFileEntry oder 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.

In diesem Beispiel wird eine Drop-Zone erstellt, die auf das drop Ereignis reagiert, indem sie die fallengelassenen Dateien und Verzeichnisse durchgeht und eine hierarchische Verzeichnisauflistung ausgibt.

Das HTML erstellt die Drop-Zone selbst, die ein <div> Element mit der ID "dropzone" und ein ungeordnetes Listenelement 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>

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

Zuerst schauen wir uns die rekursive Funktion scanFiles() an. Diese Funktion erhält als Eingabe ein FileSystemEntry, das einen Eintrag im Dateisystem darstellt, der gescannt und verarbeitet werden soll (der item-Parameter), und ein Element, in das die Liste der Inhalte 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 damit, ein neues <li> Element zu erstellen, das das gescannte Element repräsentiert. Es setzt den Namen des Elements als Textinhalt ein und fügt es dem Container hinzu. Der Container ist in diesem Beispiel immer ein Listenelement, wie Sie in Kürze sehen werden.

Nachdem das aktuelle Element auf der Liste ist, wird die isDirectory Eigenschaft des Elements überprüft. Wenn das Element ein Verzeichnis ist, müssen wir in dieses Verzeichnis eintauchen. Der erste Schritt ist, einen FileSystemDirectoryReader zu erstellen, um das Abrufen der Verzeichnisinhalte zu handhaben. Das erfolgt durch Aufrufen der createReader() Methode des Elements. Dann wird ein neues <ul> erstellt und zur Elternliste hinzugefügt; dies wird die Inhalte des Verzeichnisses auf der nächsten Ebene in der Hierarchie der Liste enthalten.

Danach wird directoryReader.readEntries() aufgerufen, um alle Einträge im Verzeichnis einzulesen. Diese werden jeweils in einem rekursiven Aufruf von scanFiles() weiterverarbeitet. Alle, die Dateien sind, werden in die Liste eingefügt; alle, die Verzeichnisse sind, werden in die Liste eingefügt und eine neue Ebene in der Hierarchie der Liste wird darunter hinzugefügt, und so weiter.

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

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

Der Ereignishandler, der alles in Gang setzt, ist natürlich der Handler für das drop Ereignis:

dropzone.addEventListener(
  "drop",
  (event) => {
    let items = event.dataTransfer.items;

    event.preventDefault();
    listing.textContent = "";

    for (let i = 0; i < items.length; i++) {
      let item = items[i].webkitGetAsEntry();

      if (item) {
        scanFiles(item, listing);
      }
    }
  },
  false,
);

Dieser ruft die Liste der DataTransferItem Objekte ab, die die fallengelassenen Elemente aus event.dataTransfer.items darstellen. 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. Erst wird die Liste geleert, indem listing.textContent auf leer gesetzt wird. Das lässt uns mit einem leeren <ul> zurück, um mit dem Einfügen von Verzeichniseinträgen zu beginnen.

Dann iterieren wir über die Elemente in der Liste der fallengelassenen Elemente. Für jedes rufen wir die webkitGetAsEntry() Methode auf, um ein FileSystemEntry zu erhalten, das die Datei darstellt. Wenn das erfolgreich ist, rufen wir scanFiles() auf, um das Element zu verarbeiten—entweder indem es zur Liste hinzugefügt wird, wenn es nur eine Datei ist, oder indem es hinzugefügt wird und in das Verzeichnis eingestiegen wird, wenn es ein Verzeichnis ist.

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 Sie sich die resultierende Ausgabe an.

• File and Directory Entries API
• Einführung in die File und Directory Entries API
• DataTransferItem
• FileSystemEntry, FileSystemFileEntry, und FileSystemDirectoryEntry
• Ereignisse: dragover und drop