Designerschreck: Fileupload
Veröffentlicht von Daniel
Bis vor kurzem war ich der Ansicht, dass man diese wunderschönen Fileupload Felder nicht anpassen könne.
Ein Irrtum! In Zeiten von jQuery sollte man sicht vielleicht davon distanzieren, dass man etwas nicht anpassen könne. Doch damit jeder weiß wo von ich hier spreche ein herkömmliches Beispiel eines Fileupload Feldes:
Schön, nicht? Wenn man nun etwas anderes (z.B. ein kleines Icon mit Text) benutzen möchte, um Datein hochzulagen, gerät man mit konventionellen Methoden in Schwierigkeiten.
Abhilfe schafft hier ein jQuery-Plugin namens “jquery.ajax_upload“.
Über die im Plugin definierte Klasse Ajax_upload kann man für ein beliebiges HTML-Element (idealerweise benutzt man die Tags a oder div) eine Fileupload Funktionalität definieren:
| Javascript | | copy code | | ? |
| 1 | $(document).ready(function(){ |
| 2 | new Ajax_upload('#upload_button', {action: 'upload.php'}); |
| 3 | }); |
Und schon kann man eine Datei hochladen, wenn auf das Element mit der ID “upload_button” geklickt wird.
Wie der Name des Plugins schon sagt, werden die Daten über AJAX (oder zumindestens so, dass es sich wie AJAX anfühlt) übertragen. Dies ermöglicht auch einen parallelen Upload von mehreren Dateien ohne, dass das Formular abgeschickt werden muss.
Ich vermute, dass man auch die Dateien synchron übertragen kann. Da mein vorrangies Ziel der Upload von mehreren Datein war und ich eher durch Zufall auf das umstylen gestoßen bin (einem Arbeitskollegen sei dank), kann ich hierzu nichts sagen. Falls ich es auch durch Zufall herausbekomme, werde ich diesen Beitrag aktualisieren. 