Archiv

TechInfo

File Upload nach eigenen Vorstellungen gestalten

By David Bary

Fast alle Formularfelder lassen sich Browserübergreifend mehr oder weniger schön dem Layout der Webseite anpassen. Jedoch gibt es immer wieder mal den Wunsch, auch den File Upload Dialog des Browsers inklusive des Pfad-Eingabe Feldes und des zugehörigen "...browse" Buttons an das Layout der Webseite und der Sprache anzupassen. Leider reagiert dieses HTML Element auf keinen Standardkonformen Versuch, es einer Schönheitskur zu unterziehen. Das es irgendwie geht, wird der ein oder andere vielleicht schon auf seinen Surftouren im Web gesehen haben. Mit dem JavaScript Konstrukt von Andrew Valums (unter der MIT Licence veröffentlicht) gibt es eine ausgereifte bequeme Lösung mit durchdachten Schnittstellen und Events für diese Anforderung.

Solche "JS-Hacks" für Anforderungen die nicht mit Standard CSS gelöst werden können, sind natürlich immer mit Vorsicht zu genießen. So kann es doch bei exzessiver Nutzung von Event-Handlern, Mauspositionsüberwachung, IFrames und DOM Manipulationen in gewissen Webseiten/Browsern zu unvorhergesehenen Effekten kommen. Ein kurzer Test im Problemkind IE 6 zeigte jedoch, dass zumindest diese Hürde ganz gut bewältigt wurde (der gepunktete Rahmen des im Hintergrund unsichtbar positionierten File-Upload Buttons beim Klick auf den selbst gestylten eigenen Upload Button ist im IE 6 verzeihbar und vielleicht sogar mit weiteren CSS Tricks vermeidbar)

Hier die Webseite des Autors Andrew Valums mit allen Infos zu seiner "Ajax Upload" Lösung (englisch):
http://valums.com/ajax-upload/

Eine gute weiterführende Auseinandersetzung mit dieser Lösung gibt es in deutscher Sprache von René Dreschler-Hackel:
http://weblog.drescher-hackel.de/09761EBD-1D09-42F1-9CDB-B0AE7081D625/Ajax+Fileupload.content.aspx

...in dem Zusammenhang sei auch gleich noch sein kleiner Beitrag zu einer "Fortschrittsanzeige" für den Ajax Upload erwähnt:
http://weblog.drescher-hackel.de/6B4214BB-D66B-4D09-BC49-63F32E65411E/Ajax+Fileupload+Fortschrittsanzeige+.content.aspx

Einen Kommentar erstellen