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

Der Unterschied zwischen :nth-child und :nth-of-ty... Ich hab hier mal wieder ein CSS eines Kollegen zwischen das von dem Bemühen zeugt, innovative Lösungen zu nicht existierenden Problemen zu finden (ist...
iOS Formulare mit jQuery Es gibt ja inzwischen einige Frameworks, die darauf basieren das man ein komplexes Javascript-Konstrukt verwendet - ähnlich einer Desktop-Anwendung - ...
CSS Grundgerüst automatisch erstellen lassen Der erste Wurf eines Templates ist recht nervig. Ich weiss nicht wie ihr vorgeht, aber ich beginne erst einmal damit die komplette Struktur in HTML au...
LimeJS – HTML5 Spiele Framework Darüber das HTLM5 der Weg in die Zukunft ist, und nicht Flash, lasse ich mich heute mal nicht aus (dann haut ihr mich wieder!:) Aber es ist schön anzu...

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.