HTML5 File Upload in jQuery

Eine der sinnvollsten Erweiterungen von HTML5 (und wahrscheinlich auch die am meisten benutzte) ist der neue Datei-Upload. In der Vergangenheit war es ja durchaus so, das man an der Stelle für den reinen Upload auf Flash zurückgegriffen hat. Der Hauptgrund war ein relativ einfacher: bei großen Dateien gab es keine Statusmeldung, der Benutzer wusste nie ob die Datei noch hochgeladen wird, oder ob der Browser schon die Flügel gestreckt hat. Insofern ist der Prozentbalken beim Upload für mich eine der sinnvollsten Erweiterungen!

jQuery File Upload Screenshot

Das war die Theorie, in der Praxis sieht die Welt dann schon etwas anders aus. Will man es richtig machen kratzt man ein wenig an vielen Techniken von HTML5 (zum Beispiel der Drag&Drop API), und kratzt man an vielen Techniken begibt man sich in eine Browser-Kompatibilitätshölle. Nach wie vor ist es ja so, das Browser nicht richtig, anders oder gar nicht Teile von HTML5 unterstützen. Ich habe an der Stelle durchaus Plugins gesehen, die erst HTML5 anbieten, dann auf Flash zurückfallen, und wenn es kein Flash gibt „einfaches“ HTML anzeigen.

Das jQuery File Upload Plugin fällt an der Stelle zum einen durch sein simples Einbinden, zum anderen durch seine Fähigkeiten und zum dritten durch die Tatsache auf, das es in allen Browsern funktioniert. Besonders interessant ist hierbei auch, das es wesentlich mehr bietet als einen HTML5-Upload und zum Beispiel auch die Blob API unterstützt. Diese erlaubt ein Resume und das Aufteilen von Dateien in mehrere kleine Teile. Eine sehr sinnvolle Sache um den Server auszutricksen denn eins ist auch klar: je größer eine Datei, desto fehleranfälliger ist der Upload via HTTP. Nähere Infos zur Blob API gibt es hier.

Wer also in seinem nächsten Projekt ein Datei-Upload braucht sollte sich das Plugin einmal ansehen. Es besticht durch seinen simplen Einbau und seine Fähigkeiten. Man braucht kaum etwas selbst machen, evtl. CSS da es im ersten Schritt davon ausgeht, das man Twitter Bootstrap verwendet.

Ähnliche Beiträge

TinyMCE in Version 3.2.2 veröffentlicht 4 Monate hat es gedauert, aber nun ist sie da, die neue Version von TinyMCE. Stellt sich nur die Frage, was eigentlich neu ist. Zunächst einmal ist zu...
d3.js – Visualisierung von Daten mit Javascr... Seit dem ganzen Hype um das Canvas-Element in HTML5 ist es scheinbar zu einem Volkssport geworden, Libraries für Javascript zu entwickeln, die entwede...
HTML5 Canvas in einfach – KineticJS Ich bin immer wieder erstaunt darüber was mit dem Canvas-Element alles möglich ist, meistens bin ich auch erstaunt darüber welcher Aufwand dazu betrie...
99 Login-Screens als PSD Login-Screens sind wohl das am meistens vernachlässigte Thema im Bereich der Backend-Entwicklung, dabei gibt es inzwischen recht schöne Möglichkeiten ...

Schreibe einen Kommentar