JavaScript Academy · Lektion

Dateien auf die Seite ziehen

Behandeln Sie vom Desktop abgelegte Dateien.

Dateien auf die Seite ziehen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Dateien vom Desktop

Neben dem Verschieben von Elementen ermöglicht die Drag-and-Drop-API, dass Benutzer Dateien aus ihrem Betriebssystem auf Ihre Seite ziehen – die Grundlage für Drop-Zonen zum Hochladen.

Datei-Drops annehmen

Die Einrichtung entspricht dem Ablegen von Elementen: Verhindern Sie die Standardaktion bei dragover und drop. Der Unterschied besteht darin, dass Sie Dateien statt getData auslesen.

dropzone.addEventListener("dragover", (e) => e.preventDefault());

dataTransfer.files

Beim Ablegen ist e.dataTransfer.files eine FileList mit abgelegten File-Objekten.

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log(files.length, "file(s) dropped");
});

Dateien durchlaufen

Eine FileList ist arrayähnlich. Wandeln Sie sie mit dem Spread-Operator um, um Array-Methoden zum Durchlaufen zu verwenden.

const files = [...e.dataTransfer.files];
files.forEach((file) => {
  console.log(file.name, file.size, file.type);
});

Dateimetadaten

Jede File stellt name, size (Bytes), type (MIME) und lastModified bereit, ohne ihren Inhalt auszulesen.

console.log(file.name);          // "photo.png"
console.log(file.type);          // "image/png"
console.log(file.size);          // 20481

Nach Typ filtern

Validieren Sie abgelegte Dateien vor der Verarbeitung – akzeptieren Sie zum Beispiel nur Bilder.

const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");

Dateiinhalte auslesen

Verwenden Sie FileReader, um eine Datei auszulesen. readAsText ist für Text und readAsDataURL für Vorschauen vorgesehen.

const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);

Abgelegte Bilder in der Vorschau anzeigen

URL.createObjectURL(file) liefert sofort eine Vorschau-URL, ohne die gesamte Datei auszulesen. Geben Sie die URL anschließend frei, um Speicher freizugeben.

const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);

items vs files

dataTransfer.items ist umfangreicher als files: Jedes DataTransferItem gibt kind ("file" oder "string") an und kann einen Datei- oder Verzeichniseintrag liefern.

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  }
}

Abgelegte Dateien hochladen

Verpacken Sie Dateien in FormData und senden Sie sie per POST an Ihren Server.

const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });

Unbeabsichtigte Navigation verhindern

Wenn eine Datei außerhalb Ihrer Zone abgelegt wird, navigiert der Browser zu ihr. Sichern Sie das gesamte Dokument ab, um dies zu verhindern.

window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());

Kurztest

Testen Sie Datei-Drops.

Zusammenfassung: Dateien hineinziehen

Sie haben eine Datei-Drop-Zone erstellt, dataTransfer.files ausgelesen, Metadaten untersucht, nach Typ gefiltert, Bilder mit Objekt-URLs in der Vorschau angezeigt, FileReader verwendet, Dateien mit FormData hochgeladen und eine unbeabsichtigte Navigation verhindert. Damit ist Drag and Drop abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „Dateien auf die Seite ziehen“ kostenlos?

Ja — der vollständige Text von „Dateien auf die Seite ziehen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Dateien auf die Seite ziehen“?

Behandeln Sie vom Desktop abgelegte Dateien. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Dateien auf die Seite ziehen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy