Einfacher Datei-Upload mit Fortschrittsbalken mit Javascript & Ajax

Bei dem Upload von großen Dateien muss der Nutzer oft lange warten, ohne dass er weiß, wie viel Prozent der Dateien schon hochgeladen wurde.

Daher wird gerne auf einen Datei-Upload mit Javascript & Ajax gesetzt. Ein gelungenes Beispiel dafür ist Dropzone.js. Derartige Lösungen haben allerdings einen Nachteil: Als Webmaster müsst ihr die Lösung erst in euer Formular integrieren und ihr müsst eine extra PHP-Seite einrichten, die den Upload verarbeitet.

Ich habe mich gefragt: Geht es noch einfacher? Die Antwort lautet: Ja! In diesem Artikel zeige ich dir, wie du mit geringem Aufwand einen Datei-Upload mit Fortschrittsbalken über JavaScript und Ajax realisieren kannst. Du brauchst keine weitere PHP-Seite für die Verarbeitung des Uploads – nur die Zielseite, die du ohnehin schon verwendest.

Die Lösung für den Datei-Upload

Die Lösung: Wir senden mit AJAX das Formular genau so, wie PHP es an den Server senden würde. Dazu werden alle möglichen Formularinhalte automatisch ausgelesen und an den Server weitergeleitet.

Die Antwort des Servers – also den vollständigen HTML-Code für die komplette Seite – nimmt JavaScript entgegen und blendet ihn nach Abschluss des Uploads ein.

Werbung

Solange der Upload aber noch läuft, können wir mit JavaScript einen Fortschrittsbalken anzeigen lassen.

Was ist, wenn JavaScript nicht unterstützt wird? Dann wird das Formular ganz normal gesendet. Für euch bedeutet das nachher im PHP-Code, der den Upload verarbeitet, keinen Unterschied.

1. Schritt: JavaScript Code einbinden

Als Erstes bindet ihr dieses JavaScript von mir ein (diesmal mit englischer Kommentierung).

Ihr könnt den Code zum Beispiel in einer .js-Datei speichern und die Datei auf der Website mit dem Datei-Upload einbinden.

2. Schritt: Formular anpassen

Als nächstes müsst ihr euer Formular anpassen. Das geniale an dieser Lösung: Es ist nur eine winzige Änderung notwendig. Fügt dem <form> Element folgende Eigenschaft hinzu:

Davon abgesehen sind keine Änderungen notwendig.

Das Upload-Skript unterstützt sogar MAX_FILE_LIMIT und file-Elemente mit multiple Attribut. Das heißt, wenn ihr vor einem file-Element ein hidden-Feld mit den Namen „MAX_FILE_SIZE“ einbaut, wird per JavaScript vor dem Upload geprüft, ob eine Datei zu groß ist. Falls ja, wird der Upload-Vorgang abgebrochen und ein Hinweis angezeigt.

Natürlich könnt ihr das JavaScript auch so auf eure Bedürfnisse anpassen, dass beispielsweise der Prozent-Balken anders aussieht oder die Meldungen anders lauten.

Beispiel gefällig?

Das Skript in Action könnt ihr zum Beispiel beim Massen Bild Editor sehen. Wählt Dateien aus und ladet sie hoch, und schon wird JavaScript die Upload-Arbeit übernehmen.

Screenshot: So sieht der Datei-Upload mit dem Skript und Fortschrittsbalken aus (modifiziert)

Mit diesem Upload-Skript habt ihr also eine einfach umsetzende Lösung für einen Datei-Upload mit JavaScript & AJAX – und vor allem mit Fortschrittsbalken. Viel Erfolg mit dem Skript!

Einfacher Datei-Upload mit Fortschrittsbalken mit Javascript & Ajax
Bewerte den Artikel


Werbung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Solve : *
15 + 25 =