kostenloser Webspace werbefrei: lima-city


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

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    w****g

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

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

    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. onchange evtl. ???

    Genau weiß ich es leider auch nicht.
    Google sollte dir helfen. ;-)
  8. Autor dieses Themas

    w****g

    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?

Über lima-city

Login zum Webhosting ohne Werbung!