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

jQuery Form Wizard Web-Formulare können einfach sein, aber auch ganz schön komplex werden. Besonders eklig können diejenigen werden, die auf mehrere Seiten aufgeteilt we...
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...
Mozilla Thimble – HTML & CSS lernen Meine persönliche Meinung ist ja, das Mozilla anstatt sich auf den Browser zu konzentrieren, in den diversesten Nebenprojekten aufreibt. Teilweise kom...
Einfaches HTML Testing mit dem HTML Inspector Damals, als ich noch den Firefox verwendet habe, gab es ein nettes Tool mit dem man testen konnte ob HTML valide ist. Dann kam HTML5, alles wurde ande...

3 Kommentare

  • 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

  • […] nach einem einfachen Script zum Hochladen von mehreren Dateien auf eine Webseite bin ich auf einen Tipp von Guido gestossen. Er stellt dort die Open Source PLUpload […]

  • 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