Wie letzte Woche schon angekündigt möchte ich Heute auf ein weiteres Formular-Element eingehen das wir, dank HTML5 und Javascript, aufhübschen bzw. sogar komplett umgehen können. Wie der Titel schon verrät, handelt es sich um das Upload-Feld.

Datei Uploads

Bisher war es immer recht mühselig Dateien hochzuladen – Denn pro Upload-Feld lässt sich klassischerweise nur eine Datei hochladen. Das soll sich ändern!

HTML5 bietet uns zwar von Haus aus das „multiple“ Attribut, welches uns erlaubt mehrerer Dateien gleichzeitig hochzuladen – von Ajax oder Drag’n’Drop jedoch noch keine Spur. Wir wollen unseren Benutzern (und uns selbst) aber eine möglichst komfortable Bedienung anbieten – Also schauen wir uns etwas um…
Schnell finden wir, wie letzte Woche auch schon, ‚zig Plugins für die Frameworks unserer Wahl.

Javascript zur Hilfe

Und wieder gilt es: Das richtige Plugin ist zu finden.
Manche bieten uns ein „Rundum-Sorglos“-Paket, wie z.B. Valums Ajax Uploader (TIPP!). Andere, wie das Plupload jQuery Plugin, benutzen Flash zum realisieren der Drag’n’Drop Funktionalität, doch das ist nicht mehr Zeitgemäß und deshalb nicht zu empfehlen (Wer möchte Heutzutage schon gerne ein externes Programm in seinem Browser ausführen um Daten hochzuladen?)!
Andere Anbieter, wie z.B. uploadify bieten uns beide Varianten (Flash / HTML5) an, verlangen aber das kaufen einer Lizenz (zumindest für die HTML5 Variante).

Besonders hilfreich und Zeitsparend: Viele Plugins liefern uns eine dokumentierte PHP Datei mit, in der wir nur wenige Anpassungen machen müssen (Zielordner der Uploads, erlaubte MIME-Typen, …). Nach ein paar Änderungen im mitgelieferten CSS sollte auch eure Applikation ohne große Probleme in der Lage sein mehrere Datei-uploads gleichzeitig zu erlauben!

Von den Großen lernen

Übrigens: Viele große (und kleine!) Applikationen setzen bereits auf solche Systeme, wie z.B. Google (innerhalb von GMail und Google Docs (bzw. Drive), Facebook (Allerdings mit der Flash-Variante) und auch ProcessWire.

Schaut euch selbst etwas um und guckt euch vor allem die PHP Quelltexte an – Hier sind mitunter clevere Lösungen zu finden!

Ich möchte mich für Heute verabschieden und euch eine angenehme Woche wünschen!