Wie verknüpfe ich eine Eingabeschaltfläche mit einem Dateiauswahlfenster?

Question

Mögliche Duplizieren:
Jquery trigger file input

ich auf einem Formular gerade arbeiten, die Benutzer Bilder auf eine Website hochladen kann. Bis jetzt habe ich eine Drag-and-Drop-Lösung, die in Chrome und Safari funktioniert. Allerdings muss ich auch die Aktion von Benutzern unterstützen, die auf eine Schaltfläche klicken und auf herkömmliche Weise nach Dateien suchen.

ähnlich wie diese tun würde:

<input type="file" name="my_file"> 

Jedoch anstatt der klobige Dateibeschreibungsbereich und unveränderbare Schaltfläche Durchsucht ich eher so etwas wie diese verwenden würde:

<input type="button" id="get_file"> 

Meine Frage Deshalb, wie mache ich diesen Knopf öffnen ein Dateiauswahlfenster und bearbeiten Sie die Auswahl auf die gleiche Weise, dass type="file" würde funktionieren?

Prost.

---

Meine Lösung

HTML:

<input type="button" id="my-button" value="Select Files"> 
<input type="file" name="my_file" id="my-file"> 

CSS:

#my-file { visibility: hidden; } 

jQuery:

$('#my-button').click(function(){ 
    $('#my-file').click(); 
}); 

Arbeiten in Chrome, Firefox und IE7 + bisher (habe IE6 nicht versucht).

Answer 1

Sie könnten JavaScript verwenden und die Eingabe der versteckten Datei auslösen, wenn auf die Tasteneingabe geklickt wurde.

http://jsfiddle.net/gregorypratt/dhyzV/ - einfache

http://jsfiddle.net/gregorypratt/dhyzV/1/ - schicker mit einem kleinen JQuery

Oder könnten Sie ein div direkt über die Datei-Eingabe Stil und setzten pointer-events in CSS zu keinem den Click-Ereignissen zu durchlassen zu die Dateieingabe, die "hinter" der Phantasie div ist.Dies funktioniert jedoch nur in bestimmten Browsern. http://caniuse.com/pointer-events

Answer 2

Wenn Sie dem Benutzer erlauben möchten, nach einer Datei zu suchen, müssen Sie eine input type="file" haben Die nächste, die Sie an Ihre Anforderung erhalten könnten, wäre input type="file" auf der Seite zu platzieren und es auszublenden. Dann löst das Click-Ereignis der Eingabe, wenn die Schaltfläche geklickt wird:

#myFileInput { 
    display:none; 
} 

<input type="file" id="myFileInput" /> 
<input type="button" 
     onclick="document.getElementById('myFileInput').click()" 
     value="Select a File" /> 

a working fiddle hier.

Hinweis: Ich würde diesen Ansatz nicht empfehlen. Der input type="file" ist der Mechanismus, den Benutzer zum Hochladen einer Datei verwenden.