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

elRTE – WYSIYWYG-Editor in jQuery inkl. Dateimanag... WYSIWYG-Editoren sind etwas Nettes, haben aber dennoch ein Problem: Die Bilder, die man in den Text einbinden möchte, müssen dummerweise erstmal auf d...
qTip2: Tooltips mit jQuery Wenn man erst einmal verdrängt hat, dass ich nicht über Ohrenstäbchen blogge, kann man sich mit dem Gedanken beschäftigen, dass es um Tooltips geht. D...
Der Bild-Upload, das Design und der Kunde Im Leben eines Webworkers kann man von zwei Prämissen ausgehen : a) Kunden beherrschen keine Bildbearbeitung und b) Grafiker schaffen es nicht ein nic...
LimeJS – HTML5 Spiele Framework Darüber das HTLM5 der Weg in die Zukunft ist, und nicht Flash, lasse ich mich heute mal nicht aus (dann haut ihr mich wieder!:) Aber es ist schön anzu...

Schreibe einen Kommentar