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

Catch404 – 404 mit jQuery Abfangen 404 sind eine sehr unschöne Sache, vor allem bei einer internen Verlinkung. Hier kann man aber zumindest durch Studieren der Log-Files merken, das etw...
Interaktive Landkarte mit HTML5 Woran es derzeit bei HTML5 mangelt sind coole Seiten, die wirklich bis ins letzte alle Möglichkeiten ausreizen. Wenn es eine solche Seite gibt, ist di...
30 Pixel Art Tutorials inkl. Isometrie Nachdem ich ja gestern bereits über die Animation von Charakteren geblogt habe, kommt man nun sehr schnell in den Zustand in dem man auch komplette We...
Isotope – Next Generation Website Layout dank jQue... Das letzte Plugin für jQuery was mich nachhaltig beeindruckt hatte, war Masonry. Das kleine Tool macht gerade auf Community-Seiten oder in Drupal rech...

Schreibe einen Kommentar

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