¿Cómo vincular un botón de entrada a una ventana de selección de archivo?

Question

Duplicar posible:
Jquery trigger file input

estoy trabajando en una forma que permite a los usuarios subir imágenes a un sitio web. Hasta ahora tengo una solución de arrastrar y soltar que funciona en Chrome y Safari. Sin embargo, también necesito apoyar la acción de los usuarios que hacen clic en un botón y buscan archivos de la manera tradicional.

Similar a lo que esto haría:

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

Sin embargo en lugar de tener el área de descripción del archivo torpe y botón Examinar no editable que prefieren usar algo como esto:

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

Mi pregunta por lo tanto, ¿cómo puedo hacer que este botón abra una ventana de selección de archivos y procese la selección de la misma manera en que funcionaría type="file"?

Saludos.

---

mi solución

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(); 
}); 

Trabajando en Chrome, Firefox e IE7 + hasta ahora (no han probado IE6).

Answer 1

Puede usar JavaScript y disparar la entrada del archivo oculto cuando se hace clic en la entrada del botón.

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

http://jsfiddle.net/gregorypratt/dhyzV/1/ - más elegante con un poco de jQuery

O bien, puede labrar un div directamente sobre la entrada de archivos y establecer pointer-events en CSS para ninguno de permitir que los eventos de clic para pasar a través de la entrada de archivo que está "detrás" de la div imaginaria.Esto solo funciona en ciertos navegadores; http://caniuse.com/pointer-events

Answer 2

Si desea permitir que el usuario busque un archivo, necesita tener un input type="file" Lo más cercano que podría obtener a su requerimiento sería colocar el input type="file" en la página y ocultarlo. A continuación, activar el evento clic de la entrada cuando se hace clic en el botón:

#myFileInput { 
    display:none; 
} 

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

Aquí es a working fiddle.

Nota: No recomendaría este enfoque. El input type="file" es el mecanismo que los usuarios están acostumbrados a usar para cargar un archivo.