DataTransferItem: webkitGetAsEntry() Methode
Wenn das durch das DataTransferItem
beschriebene Element eine Datei ist, gibt webkitGetAsEntry()
ein FileSystemFileEntry
oder FileSystemDirectoryEntry
zurück, das sie repräsentiert. Wenn das Element keine Datei ist, wird null
zurückgegeben.
Hinweis:
Diese Funktion ist derzeit in nicht auf WebKit-basierenden Browsern, einschließlich Firefox, als webkitGetAsEntry()
implementiert; sie könnte in Zukunft in getAsEntry()
umbenannt werden, daher sollten Sie defensiv programmieren und nach beiden suchen.
Syntax
webkitGetAsEntry()
Parameter
Keine.
Rückgabewert
Ein FileSystemEntry
-basiertes Objekt, das das abgelegte Element beschreibt.
Dies wird entweder FileSystemFileEntry
oder FileSystemDirectoryEntry
sein.
Die Methode wird abgebrochen und gibt null
zurück, wenn das abgelegte 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 abgelegten Dateien und Verzeichnisse durchsucht und eine hierarchische Verzeichnisauflistung ausgibt.
HTML
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>
CSS
Die in diesem Beispiel verwendeten Stile werden 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
entgegen, das einen Eintrag im Dateisystem repräsentiert, 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).
Hinweis:
Um alle Dateien in einem Verzeichnis zu lesen, muss readEntries
wiederholt aufgerufen werden, bis es ein leeres Array zurückgibt.
In auf Chromium basierenden Browsern wird das folgende Beispiel nur maximal 100 Einträge zurückgeben.
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 gescannte Element darzustellen, fügt 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 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 weitergehen.
Der erste Schritt ist die Erstellung eines FileSystemDirectoryReader
, um das Abrufen des Inhalts des Verzeichnisses zu handhaben.
Dies geschieht durch Aufruf der createReader()
Methode des Elements.
Dann wird ein neues <ul>
erstellt und der übergeordneten Liste hinzugefügt; dies wird den Verzeichnisinhalt 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 einen rekursiven Aufruf von scanFiles()
übergeben, um sie zu verarbeiten.
Alle, die Dateien sind, werden in die Liste eingefügt, alle, die Verzeichnisse sind, werden in die Liste eingefügt und eine neue Ebene der Listenhierarchie wird tiefer 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 Drop 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,
);
Dies ruft die Liste der DataTransferItem
Objekte ab, die die abgelegten Elemente von event.dataTransfer.items
darstellen.
Dann rufen wir Event.preventDefault()
auf, um zu verhindern, dass das Ereignis weiter verarbeitet wird, nachdem wir fertig sind.
Nun ist es an der Zeit, die Liste zu erstellen. Zuerst wird die Liste geleert, indem listing.textContent
auf leer gesetzt wird.
Das hinterlässt uns ein leeres <ul>
, in das wir Verzeichniseinträge einfügen können.
Dann iterieren wir über die Elemente in der Liste der abgelegten Elemente.
Für jedes wird die webkitGetAsEntry()
Methode aufgerufen, 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 wir es zur Liste hinzufügen, wenn es nur eine Datei ist, oder indem wir es hinzufügen und hinein gehen, wenn es ein Verzeichnis ist.
Ergebnis
Sie können sehen, wie dies funktioniert, indem Sie es unten ausprobieren. Finden Sie einige Dateien und Verzeichnisse und ziehen Sie sie hinein und sehen Sie sich die resultierende Ausgabe an.
Spezifikationen
Specification |
---|
File and Directory Entries API # dom-datatransferitem-webkitgetasentry |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
webkitGetAsEntry |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support