HTML5 Uploader

Klassische Dateiuploads sind benutzerunfreundlich. Mit HTML5 und JavaScript gibt es eine schöne neue Alternative zu den klassischen Formularen: Drag and Drop-Dateiupload.

Pro und Kontra

Die neue Uploadmethode bringt viele Vorteile, doch in einigen Punkten hinkt sie dem klassischen Uploadformular noch hinterher.

Vorteile

  • Sehr benutzerfreundlich
  • Mehrere Dateien gleichzeitig hochladen

Nachteile

  • Programmieraufwand
  • Kompatibilität momentan noch sehr eingeschränkt
  • Der Benutzer muss JavaScript aktiviert haben

Tutorial

Der JavaScript-Teil des Uploaders besteht grundsätzlich aus vier Events und einer Upload-Funktion. In diesem Beispiel benutze ich jQuery für die Events, jQuery ist jedoch nicht zwingend erforderlich.

Die vier Events lauten ‘dragenter’, ‘dragover’, ‘dragleave’ und ‘drop’. Die ersten drei Events erhalten keine grosse Aufgabe, sie sollen nur das Standardverhalten des Browsers unterbinden. Im Beispiel ist ‘uploader’ die ID des Elementes, auf das die Dateien gedropt werden sollen.

Das ‘drop’-Event “empfängt” die Dateien und leitet sie an die Upload-Funktion weiter.

Wird nicht mit jQuery gearbeitet, können die Events wie folgt verwendet werden:

Die Upload-Funktion macht grundsätzlich nichts anderes, als eine Form mit den Dateien zusammenzu”bauen”.

 

Das war auch schon der JavaScript-Teil des Uploaders. Die Dateien werden nun, wie bei einem Upload über normale File-Inputs, an eine PHP-Datei gesendet. Diese PHP-Datei verarbeitet die Dateien und speichert sie beispielsweise auf dem Server oder in einer Datenbank.

Demo

Dateien auf dem Server speichern

Nachdem die Daten an den Server geschickt wurden, müssen sie natürlich noch gespeichert werden. Hier ein Beispiel für eine upload.php-Datei, welche die Dateien im ‘upload/’-Ordner speichert.