DataTransfer: files Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die files schreibgeschützte Eigenschaft des DataTransfer-Interfaces ist eine Liste der Dateien in der Ziehoperation. Wenn die Operation keine Dateien umfasst, ist die Liste leer.
Diese Funktion kann verwendet werden, um Dateien von einem Desktop des Nutzers in den Browser zu ziehen.
Während einer Ziehoperation kann diese Eigenschaft nur verwendet werden, um Dateien in den Handlern für die dragstart und drop-Events zu lesen, da dies die einzigen Zeiten sind, in denen der Ziehdaten-Store lesbar ist. Der Zugriff darauf von jedem anderen Zieh-Event ergibt eine leere Liste. Siehe Lesen des Ziehdaten-Stores für Details.
Für Zwischenablageoperationen können Dateien auch im Handler für das paste-Event unter Verwendung von ClipboardEvent.clipboardData gelesen werden.
Wert
Eine FileList der Dateien in einer Ziehoperation, ein Listeneintrag für
jede Datei in der Operation. Wenn die Ziehoperation keine Dateien hatte, ist die Liste leer.
Beispiele
Lesen der Dateiliste
Dieses Beispiel erstellt einen grundlegenden Bereich, in den Sie Dateien ablegen können, und zeigt einige Metadaten an.
<pre id="output">Drop files here from your file system.</pre>
#output {
min-height: 200px;
border: 1px solid black;
padding: 1em;
}
const output = document.getElementById("output");
function log(text) {
output.innerText += text;
}
output.addEventListener("dragenter", (e) => {
e.stopPropagation();
e.preventDefault();
output.textContent = "";
});
output.addEventListener("dragover", (e) => {
e.stopPropagation();
e.preventDefault();
});
output.addEventListener("drop", (e) => {
e.stopPropagation();
e.preventDefault();
const files = event.dataTransfer.files;
log(`File Count: ${files.length}\n`);
for (const file of files) {
log(` File: ${file}, ${file.name}, ${file.size} bytes\n`);
}
});
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-datatransfer-files-dev |