cómo hacer que el campo de entrada de archivo se ajuste?

Question

En un formulario HTML que tienen un campo de archivo de la siguiente manera:

<div class="filefield"> 
<input type="file" name="myfile" id="fileinput"> 
</div> 

muestra un botón y un poco de texto, además del botón. Cuando aún no se ha seleccionado ningún archivo, el texto es: No file chosen. Si ya hay un archivo seleccionado, muestra el nombre del archivo.

Este texto se muestra en el lado derecho del botón. Quiero que se muestre debajo del botón. He intentado varias cosas en CSS, y nada funciona, el No file chosen siempre se muestra en el lado derecho del botón, incluso si tanto el div como la entrada tienen anchos fijos solo tan anchos como el botón, y una altura fija lo suficientemente alta para un botón y dos líneas de texto, el texto aún se muestra a la derecha, fuera del div y no debajo del espacio dentro del div. ¿Cómo hacer que se ajuste para que el texto aparezca debajo del botón?

Answer 1

Usted puede mirar en jQuery y algunos de los plugins de carga de archivos que pueden ayudarle "restyle" la entrada esencialmente ocultándola y activando/mostrando la información seleccionada del archivo en html.

http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/

http://www.uploadify.com/demo/

http://www.plupload.com/example_queuewidget.php

http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/

Answer 2

No puede. El campo de entrada de archivo es un control único, incluso si parece varios controles que podrían controlarse por separado.

Además, la forma en que se muestre el control de entrada de archivos depende completamente del navegador que esté utilizando. Su apariencia no está especificada en los estándares, por lo que cualquier proveedor de navegadores puede elegir mostrarla de la forma que estime conveniente.

Answer 3

Con la respuesta de @ Guffa que muestra que no puede meterse con ese campo, puede crear un hack alrededor de él.

¿Qué pasa con un elemento de botón, que al hacer clic actúa como un botón del navegador de archivos? ¿Y luego un elemento span que contiene el valor de esa entrada del navegador de archivos? Sería algo así como hackeo js, ​​pero podría resolver el problema.

EDITAR

Ejemplo de trabajo: http://jsfiddle.net/nmeAW/1/

Editar 2

ejemplo aún más trabajo mejor: http://jsfiddle.net/nmeAW/2/