kostenloser Webspace werbefrei: lima-city

File-Input per CSS verschönern & Event beim auswählen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   w****g

   17:48, 14.2.2013

   Hallo,
   
   ich habe momentan folgendes Problem: Ich habe für einen Uploadscript ein Formular gebastelt und möchte nun das File-Input-Feld verschönern. Ich habe mir auch schon diverse Tutorials angeschaut und auch relativ großen Erfolg gehabt; Das click()-Event wurde ausgelöst, sobald man auf einen eigens gestalteten Button geklickt hat, wodurch sich dann der Dialog öffnete. Das hat in allen Browsern gut funktioniert, bis auf Opera. Deshalb wolte ich einfach mal fragen, ob es auch eine professionellere Lösung gibt. Kann man den Input vielleicht doch direkt stylen? Und noch etwas: Gibt es ein Event, wenn eine Datei ausgewählt wurde? Das wäre für einen automatisch Upload notwendig.
   
   Danke im voraus!

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. pcw

   pcw hat kostenlosen Webspace.

   9:54, 15.2.2013

   Wie soll es denn aussehen, bzw. was hast du bisher erreicht?
   Ein Link wäre nicht schlecht. Das mit der Glaskugel funktioniert nicht
   
   Einige Eigenschaften kannst du über
   

   input[type="file"] {
   ...
   }

   
   ändern.
   
   Aber wie gesagt, niemand kann dein gewünschtes Ergebniss erahnen!
4. Autor dieses Themas

   w****g

   16:07, 15.2.2013

   Danke für deine Antwort. Die Glaskugel wird in diesem Fall nicht wirklich gebraucht, denn wie beschrieben habe ich einen selbst gestalteten Button die Aktion vom File-Input aufrufen lassen, da beim stylen des Fileinputs immer nur der Button von diesem geändert wurde. Ich muss es also entweder schaffen, dass ich auch den Rest ändern kann oder irgendwie Opera dazu bringen, den File-Dialog nach einem Klick zu öffnen. Hier ist der onclick-Script meines Buttons:
   
   

   onclick="$('#fileinput').click();"

   
   
   Ich hoffe, ich habe das nicht zu verwirrend geschrieben :-)

5. pcw

   pcw hat kostenlosen Webspace.

   17:53, 15.2.2013

   vielleicht hilft dir das weiter (gefunden bei css-tricks.com):
   
   

   <form method="" action="">
       <input type="file" name="fileupload" id="fileupload" />
   </form>
   <input type="button" id="upload-btn" value="Upload">

   
   
   

   <script type="text/javascript">
   	$('#upload-btn').on("click", function () {
       	$('#fileupload').click();
   	});
   </script>

   
   
   

   form {
   visibility: hidden;
   }

   
   
   Den File-Dialog in Opera öffnet es jedenfalls. :-)
6. Autor dieses Themas

   w****g

   17:56, 15.2.2013

   Ich werde es mal probieren. Aber, abgesehen davon, dass ich das bei "onclick" eingefügt habe, ist es eigentlich bei mir genauso. Nur noch eine Frage: Gibt es ein Event, sobald eine Datei ausgewählt wurde? Wäre für Ajax-Upload praktisch.

7. pcw

   pcw hat kostenlosen Webspace.

   18:09, 15.2.2013

   onchange evtl. ???
   
   Genau weiß ich es leider auch nicht.
   Google sollte dir helfen.
8. Autor dieses Themas

   w****g

   18:34, 15.2.2013

   Werde ich mal probieren. Trotzdem schade, ich habe nämlich bei Google nicht wirklich etwas gefunden und es ist irgendwie schlecht, das sekündlich von einem Timer überprüfe zu lassen. Trotzdem danke für die Antworten!
   
   Beitrag zuletzt geändert: 15.2.2013 18:34:42 von web-ag

9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?