Vorheriger Artikel Nächster Artikel

Fünf HTML5-Uploader für Deine Webseite

Webentwickler haben verschiedenste Möglichkeiten, um Datei-Uploads zu realisieren. Das alte File-Input-Feld hat ausgedient. stellt APIs zur Verfügung, mit denen eine tiefgehender Zugriff auf Dateien und die Manipulation selbiger möglich wird, noch bevor sie beim Server landen. Wir zeigen euch fünf Lösungen, mit denen ihr sehr einfach Datei-Uploads via Drag&Drop realisieren könnt.

Fünf HTML5-Uploader für Deine Webseite

Native HTML5-APIs

HTML5_sticker

HTML5 stellt sehr leistungsstarke APIs für die Interaktion mit Dateien und dem lokalen Dateisystem des Benutzers zur Verfügung. Unter anderem können mit Webanwendungen Dateien asynchron gelesen, an einen temporären Speicherort verschoben, Dateiverzeichnisse rekursiv gelesen und Dateien per Drag & Drop in den Browser hochgeladen werden.

Es ist möglich, Bilder noch während der Übertragung zum Server im Client anzuzeigen. Außerdem kann bereits vor dem Upload der Mimetyp und die Größe des Uploads überprüft werden, um Beschränkungen zu überprüfen und bei Bedarf die hochzuladenden Bilder noch vor der Übertragung auf eine andere Größe zu skalieren.

Da der technische Stand der Browser in Sachen HTML5 noch sehr unterschiedlich ist und die von Null an mit gewissen Startschwierigkeiten verbunden ist, ist der Einsatz von anderen Bibliotheken zur Realisierung von Datei-Uploads ein praktikables Mittel.

Wenn du eine Herausforderung suchst und gerne die volle Kontrolle über deinen Code hast, findest du auf den Seiten von HTML5Rocks Beispiele und weiterführende Links zum Datei-Handling mit HTML5.

Dropzone.js: Drag&Drop Uploader mit Bildvorschau

Dropzone.js Screenshot (Vor Upload)

Dropezone.js realisiert einen Drag&Drop-Datei-Upload mit Dateivorschau. Das Skript verwandelt in der Standardeinstellung Formular-Elemente mit der „dropzone“-Klasse oder kann alternativ via jQuery-Aufruf einem beliebigen Element im Dokument zugewiesen werden. Serverseitig können die Daten von Dropzone.js wie bei einem normalen Datei-Uploader via Formular verarbeitet werden.

Für die Realisierung der Funktionalität nutzt Dropzone.js die dafür vorgesehen HTML5-APIs. Dementsprechend kann das Skript nicht alle Browser mit den dadurch verfügbaren Komfortfunktionen ausstatten. Für nicht unterstützte Browser bietet Dropzone ein Fallback auf den klassischen Datei Uploader.

Uploadify: Drag&Drop Uploader mit HTML5 und Flash

uploadify_file_uploader

Uploadify ist ein jQuery-Plugin, das Datei-Upload-Funktionalitäten ermöglicht. Das Plugin stellt einen Drag&Drop-Upload, eine Echtzeit-Forschrittsanzeige sowie Filter-Funktionalitäten zur Verfügung. Für Browser, die auf HTML5 basierende Features nicht unterstützen, liefert Uploadify ein Flash-Fallback, bei dem die Besucher lediglich auf das Drag&Drop verzichten müssen. In mobilen Browsern (getestet mit Mobile Safari und Chrome) funktioniert Uploadify leider nicht.

Fine Uploader

fine_uploader

Fine Uploader kann Drag&Drop-Uploads von mehreren Dateien und sogar Ordnern (Chrome 21+) mit Fortschrittsanzeige realisieren und unterstützt ältere Browser, etwa den Internet Explorer ab Version 7. Für aktuelle Browser steht die Drag&Drop-Funktionalität zur Verfügung. Man kann eigene Validierungsfunktionen definieren, beliebige Parameter beim Upload jeder Datei an den Server übermitteln und eigene Fehler und Statusmeldungen definieren. Für die kommerzielle Nutzung des Skriptes werden 49 US-Dollar fällig.

Plupload: Upload mit HTMl5, Flash, Silverlight und mehr

plupload_uploader

Plupload ist ein Upload-Skript von den Machen des WYSIWYG-Editors TinyMCE und bündelt eine Reihe verschiedenster Ansätze für den Dateiupload unter einem Dach. Neben dem klassischen HTML-Upload-Element und dem neuen HTML5-Uploader bietet Plupload Fallbacks auf Flash, Gears, Silverlight und BrowserPlus, sodass die größtmögliche Anzahl von Features für den Client zur Verfügung steht und eine möglichst hohe Kompatibilität sichergestellt werden kann.

Für kommerzielle Projekte fällt beim Einsatz von Plupload eine Lizenzgebühr in Höhe von 10 Euro (für eine einzelne Website) an. Umkommerzielle Projekte könnten unter der GPLv2 auf die Bibliothek zurückgreifen.

Weiterführende Links

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von Johannes am 07.05.2013 (09:49Uhr)

    Der Link zu Uploadify ist defekt ;)

    Antworten Teilen
  2. von rené am 07.05.2013 (10:18Uhr)

    Tippfehler in der Uploadify-URL ;)

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema HTML5
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

SEO-Reports für Fortgeschrittene: So hast du deine Website im Blick [t3n-Video-Workshop]
SEO-Reports für Fortgeschrittene: So hast du deine Website im Blick [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Layouts mit der CSS-Box-Modell-Alternative Flexbox einfacher umsetzen [t3n-Video-Workshop]
Layouts mit der CSS-Box-Modell-Alternative Flexbox einfacher umsetzen [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen