Botón para mostrar elegir un archivo para cargar el cuadro de diálogo

Question

En lugar de utilizar una etiqueta html input type="file", ¿es posible abrir un cuadro de diálogo choose a file to upload haciendo clic en input type="button"? Luego, cuando se selecciona un archivo del cuadro de diálogo choose a file to upload, la ruta del archivo se inserta en una etiqueta normal html input type="text"?

Parece que gmail hace algo similar, pero no con botones y entradas de texto, simplemente tienen un enlace add file o algo así. Cuando se hace clic en ese enlace, se muestra el cuadro de diálogo select file(s) to upload by mail.google.com. Cuando se hace clic en un archivo, el nombre del archivo se muestra en la pantalla.

¿Cómo están haciendo eso?

Answer 1

Creo que la mayoría de los navegadores lo tienen bloqueado por razones de seguridad. Los botones y cuadros de texto se pueden manipular a través de JavaScript. Los cuadros de entrada de archivos no pueden, y por una buena razón; imagine si un javascript podría abrir un diálogo, establecer la ruta a un archivo sensible en su sistema, luego simular el botón, haga clic para descargar el archivo.

---

Por cierto, si usted está buscando el estilo, tal vez esto funcionaría: http://www.quirksmode.org/dom/inputfile.html

Answer 2

No es posible alterar un input[type=file] como quiera, es un elemento de forma puramente nativo.

Además, no podrá obtener la ruta al archivo por razones de seguridad. Las versiones anteriores de IE muestran la ruta pero ya no es el caso con las versiones más nuevas y de todos modos no podrás hacer nada con la ruta en el lado del servidor.

Existen, sin embargo algunos métodos a estilo:

• Styling File Upload/Select Input Control
• Styling an input type="file"
• Styling file inputs with CSS and the DOM

Answer 3

echar un vistazo a plupload, lo he usado muchas veces para manejar la carga de archivos .

Answer 4

Marque esta violín: http://jsfiddle.net/A4BS7/1/

NOTA:

a) Esto no puede funcionar bien en los navegadores antiguos (principalmente IE) que no disparan el evento de cambio en el archivo de entrada.

b) Para que la carga funcione como se espera, deberá incluir el elemento <input type="file"> en su formulario. El elemento de texto se puede usar para mostrar el archivo seleccionado en el mejor de los casos.

Answer 5

<input type="file" style="display:none;" id="inputfile"/> 
<a href="javascript:document.getElementById('inputfile').click(); ">try this</a> 

Pruebe este. Creo que es útil ... :)