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

jCookies – Cookies mit jQuery Cookies sind eine sinnvolle Sache, meistens mit dem Holzhammer verwendet. In der Regel werden sie entweder benutzt um eine Session in PHP zu kennzeich...
HTML5 Canvas Cheat Sheet Kurz und schmerzlos: heute gib es ein Cheat Sheet für das HTML5 Canvas-Element, das als PDF oder als PNG heruntergeladen werden kann. Auch wenn es mir...
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...
OpenJS Grid – Visualisierung von Daten via Ajax Ok, der Titel ist vielleicht etwas mystisch, im Endeffekt reden wir über einen mit JavaScript aufgebohrten Table ;) Ich habe mich ja schon des Öfteren...

Schreibe einen Kommentar