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

Rollenspiele in HTML5 Was waren das noch Zeiten als isometrische Grafiken das neue Ding waren. Während man sich mit Telnet durch MUDs gekämpft hatte, und das erste Ultima a...
Zebra – der Desktop im Browser mit HTML5 Inzwischen sollte es sich bis in die hinterste Ecke herum gesprochen haben das in ein paar Jahren alles in der Cloud passiert, und somit im Browser. I...
Modernizr – HTML5 und CSS3 mit Fallback Manchmal ist der Teufel ein Eichhörnchen, und scheinbar hat er sich an einem langen Winterabend überlegt, der beste Weg die Menschheit zu quälen wären...
Nokia Maps API mit jQuery Eine Landkarte online zu bringen bedeutet nicht zwingend Google Maps, sondern es gibt auch noch andere Systeme. Nokia Maps ist eines dieser Systeme un...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.