Wie öffnet man eine Datei Dialogfeld oder Dateien Durchsuchen-Fenster mit Skripten?

Gerne zeige ich ein Bild, oder alle Elemente von html und initialisieren einer Höhe. Wenn ich ein Datei Typ der Eingabe in html, hinter der ein Bild wie dieses :

<img src="image.png">
<input type="file" name="image" id="booksimage" style="opacity: 0">

Also input-element verschwunden und wenn ich klickte auf das Bild-Datei-Öffnen-Dialog geöffnet, aber es funktioniert in einer Höhe von einem normalen input-element. wenn ich eine Höhe von 100px zu input-element, es Dosis nicht funktionieren mehr als.

Wenn ich sehe, dass problem von html, ich habe mich für Javascript-oder Jquery-problem zu lösen, suchte ich einen finden sich einige ähnliche Themen wie :

Wie öffnet man eine Datei /durchsuchen-dialog mit javascript?

aber die Lösung ist für spezielle Browser und firefox unterstützt es nicht.
Gibt es eine andere Möglichkeit zum öffnen der Datei-Browser-Dialog, indem Sie auf ein Bild?!

InformationsquelleAutor Mahmood Kohansal | 2013-01-17

  1. 1
    $('img').click(function() {
    $('input[type="file"]').click();
});

    InformationsquelleAutor user1506098

  2. 0

    Unglücklicherweise browser nicht öffnen durchsuchen, Datei-dialog ohne bestimmtes Ereignis ausgelöst, durch das klicken auf eine Eingang tag mit type="file" Es gibt einige Möglichkeiten, um zu arbeiten aorund, aber es wird nicht wirklich auf jedem browser, die Sie haben.

    InformationsquelleAutor Luca Simonetti

  3. 0
    <style type="text/css">
#file-image {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
}


#file-image input {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
}

</style>
<div id="file-image">
    <input type="file">
    <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" width="40" height="40" />
</div>

    InformationsquelleAutor Vasil Nikolov

  4. 0

    Könnte dies ein paar Jahre zu spät, aber hier ist ein Weg, es zu tun, ohne Javascript und ist es auch mit jedem browser kompatibel.

    <label>
  Open file dialog
  <input type="file" style="display: none">
</label>

    Falls Sie Probleme feststellen, die Sie verwenden müssen, um die for Attribut in der label Hinweis auf die id des Eingangs.

    InformationsquelleAutor JP de la Torre

Schreibe einen Kommentar