Upload Formular - Input und Button Browser unabhänig

[chriso]

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

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>

<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>  

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.

[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

[wurzelbert]

servus wurzelbert,

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

trotzdem blöd, denn dein eigentliches Problem kommt bei sowas noch dazu. Also korrigiere ich mich: Upload-Felder selbst stylen ist nicht einwandfrei durchführbar

der wurzelbert

[chriso]

servus wurzelbert,

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

trotzdem blöd, denn dein eigentliches Problem kommt bei sowas noch dazu. Also korrigiere ich mich: Upload-Felder selbst stylen ist nicht einwandfrei durchführbar

Kennst Du denn eine gute Lösung dafür? Gibt es irgendwo eine Anleitung? Viele haben gestylte Uploadformulare, weil unformatierte zerstören einem gerne das Layout.

der wurzelbert

[wurzelbert]

servus chriso,

Kennst Du denn eine gute Lösung dafür? Gibt es irgendwo eine Anleitung? Viele haben gestylte Uploadformulare, weil unformatierte zerstören einem gerne das Layout.

Fux dich in http://de.selfhtml.org/javascript/index.htm@title=Javascript ein, lerne auf <http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=HTML-Elemente zuzugreifen> und diese zu manipulieren oder <http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=Informationen aus ihnen zu ziehen>.

Du hast keine Erfahrung? kein Problem, ich habe mit dem gleichen Stand vor ca. zwei Jahren angefangen und es auch geschafft.
Wenn du das hinkriegst, werden ganz andere Probleme viel leichter erscheinen.

Lelne halt, jungel Glashüpfel!

der wurzelbert

[chriso]

Hallo Wurzelbert

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.

»»
Das ist ein guter Ansatz :) jetzt müsste man nur noch Javascript beherschen :(
Deshalb habe ich es versucht ohne umzusetzen.

Kennt jemand einen guten Link zu einem fertigen Uploadformular oder ggf. Ansatz für die Übergabe per Javascript?

Insgesamt finde ich die Lösung des Uploadformulars einfach und gut, nur die Übergabe fehlt.