Upload Formular - Input und Button Browser unabhänig

[wurzelbert]

servus chriso,

Leider sind Uploadformulare nicht so leicht formatierbar wie normale Formularfelder. In jedem Browser sehen diese anders aus.

doof aber wahr.

Eine Möglichkeit ist aber das Uploadfeld in den Vordergrund zu stellen (z-index:2) welches aber nicht sichtbar ist (opacity:0) und ein 2. Input kommt hinzu, in einem Div, der sichtbar ist.

<div class="container"> <input type="file" class="file"> <div class="fakeinput"><input> Datei uploaden</div> </div>

>   
>   
> ~~~html

<style type="text/css"> div.container{position:relative;} div.fakeinput{position:absolute;top:0;left:0;z-index:1;} input.file{position:absolute;top:0;left:0;text-align:right;-moz-opacity:0;filter:alpha(opacity:0);opacity:0;z-index:2;} </style>  

> 

Unter Umständen möglich, aber keine universale Lösung des Problems.

Jetzt das eigentliche Problem und meine Frage dazu: wenn ich eine Datei auswähle fehlt der eigentliche Dateiname im Input. Der Upload funktioniert problemlos, nur möchte der User der eine Datei auswählt auch sehen das eine ausgewählt worden ist.

Wenn du über Javascript auf den Value des Uploadfeldes zugreifst, bekommst du den Dateinamen. Den kannst du in dein fakeinput einsetzen.

der wurzelbert