Multiple File Uploads, HTML und Open Source

Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload. Hinzu kommt die Tatsache, dass die Technik des Fileuploads in HMTL wohl bestenfalls vorsintflutlich bezeichnet werden kann, und man – gerade bei großen Dateien – nie weiß, wie groß der Fortschritt des Uploads gerade ist. Hinzu kommt, dass multiple Uploads nur möglich sind, wenn man mehrere File-Felder in eine Datei einfügt.

Die Lösung, der meistens Content Management Systeme ist, ein Dateiupload nicht mehr über HTML zu handhaben, sondern eine spezialisierte Flash-Anwendung bereitzustellen, die diese Aufgabe übernimmt. Es gibt auch entsprechende Java Applets, aber da Flash die größere Verbreitung hat, ist zumindest dabei davon auszugehen, dass es bei fast jedem funktioniert.

Screenshot eines PLUpload-Formulars

Die Programmierer des TinyMCE hatten wohl jetzt endgültig die Faxen dicke und stellen nun mit PLUpload eine Open Source zur Verfügung, mit der sich vernünftig Dateiuploads handhaben lassen. Auch interessant ist es, das die Programmierer nicht ihre eigenen Javascript-Funktionen verwenden, sondern auf jQuery zurückgreifen! Mit ein paar Zeilen jQuery lässt sich ein Upload-Feld generieren, das dann Dateien entweder mit HTML5 Gears, Silverlight, Flash, BrowserPlus oder im schlechtesten Falle „einfaches“ HTML empfängt.

Dabei gibt es eine nette Fortschrittsanzeige und bei Bildern die Möglichkeit, diese direkt zu resizen. Auf Server-Seite ist das Tool dabei vollkommen transparent, da ein Post auf die Action der Form immer mit einer einzelnen Datei erfolgt. Ein Filter auf die Dateien, die upgeloadet werden können, ist ebenfalls möglich.

Alles in allem eine sehr nette und vor allem sehr stabile Möglichkeit, dem Benutzer ein vernünftiges Upload-Feld anzubieten.

Ähnliche Beiträge

CSS Refresh ohne Reload, dafür mit JavaScript Seien wir doch mal ehrlich, was ist die am meisten genutzte Taste auf eurer Tastatur? Richtig! F5 - Reload! ;) Das nervige Reloaden einer Seite kann d...
TransformJS – einfache Transforms mit JavaSc... CSS Transforms sind eigentlich fester Bestandteil jedes Browser - dummerweise in jedem Browser ein klein wenig anders, und dummerweise auch mit andere...
Lettering.js für jQuery Ich fürchte die Sache mit den Webfonts ist noch lange nicht ausgestanden, zum einen kämpft man ständig mit Unstyled Content, zum anderen können die Br...
Mit Repo.js GitHub-Repositories in die eigene Seit... GitHub ist eine echt feine Sache, ich habe trotz der recht interessanten Preisgestaltung erst vor kurzem auf einen Premium-Account gewechselt. Es mach...

3 Antworten auf „Multiple File Uploads, HTML und Open Source“

  1. Super Artikel, leider erst heute darauf gestoßen. Auch ich finde die Idee von Plupload super und werde mich gleich mal einlesen.
    @Alex: Wenn du den „Send“ Button erstmal per CSS „display:none;“ rausnimmst und dann per jQuery nach abgeschlossenem Upload erst einblendest, kann das Problem nicht auftreten. Dann kann auch ein DAU damit umgehen ;)

    Viele Grüße
    und vielen Dank für den tollen Tip zu Plupload!

    Oliver

  2. Pingback: Flash und HTML 5 Dateiupload Script für eine Webseite
  3. Hallo, du sprichst mir echt aus der Seele das ist ein Elend mit den Uploadfeldern! Ich bastel gerade an mehreren Seiten wo ich das Problem habe und das ist echt genial das ich gerade beim sinnlos rumsurfen auf deinen Artikel treffe…

    Ich finde die Usability allerdings noch etwas bedenklich! Man muss ja anscheinend nach Auswahl der Dateien erst mal auf den kleinen Play Button unten rechts drücken, wie soll da ein unversierter Nutzer drauf kommen? Die drücken wahrscheinlich alle einfach direkt „Send“ ohne die Dateien hochgeladen zu haben…

    Ich werde mich mal ein wenig damit beschäftigen, vielen dank für deinen tollen Artikel!

Schreibe einen Kommentar

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