DataTransfer: files-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die schreibgeschützte files-Eigenschaft von DataTransfer-Objekten ist eine Liste der Dateien in der Drag-Operation. Wenn die Operation keine Dateien enthält, ist die Liste leer.

Diese Funktion kann verwendet werden, um Dateien vom Desktop eines Benutzers in den Browser zu ziehen.

Hinweis: Die files-Eigenschaft von DataTransfer-Objekten kann nur innerhalb der drop und paste-Ereignisse zugegriffen werden. Für alle anderen Ereignisse wird die files-Eigenschaft leer sein, da ihr zugrunde liegender Datenspeicher sich in einem geschützten Modus befindet.

Wert

Eine FileList der Dateien in einer Drag-Operation, ein Listeneintrag für jede Datei in der Operation. Wenn die Drag-Operation keine Dateien enthielt, ist die Liste leer.

Beispiele

Die Dateiliste lesen

Dieses Beispiel erstellt einen einfachen Bereich, in den Sie Dateien ziehen können, und zeigt einige Metadaten an.

html
<pre id="output">Drop files here from your file system.</pre>
css
#output {
  min-height: 200px;
  border: 1px solid black;
  padding: 1em;
}
js
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

Specification
HTML
# dom-datatransfer-files-dev

Browser-Kompatibilität