input file con imágen y jQuery

Mediante jQuery tambien podemos modificar el aspecto de los input file, cosa que no podemos hacer simplemente mediante estilos y css. La manera de hacerlo que voy a mostrar es mediante el plugin jQuery filestyle.

Su utilización será muy sencilla: lo primero, como siempre, será incluir las llamadas a los ficheros del framework jQuery y al plugin. A continuación, aplicaremos el plugin a los elementos input file que necesitemos, en este ejemplo lo realizaré sobre la clase inputFile, aunque se podría aplicar a todos los elementos file o a uno simplemente.

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.filestyle.pack.js"></script>
<script language="javascript" type="text/javascript">
    $(function() {
         $(".inputFile").filestyle({
             image: "images/btn_examinar.gif", //Ruta de la imagen (botón).
             imageheight:24, //Height de la imagen.
             imagewidth: 81, //Widht de la imagen.
             width: 150 //Tamaño del input.
         });
    });
</script>

Con este código estamos aplicando el plugin a todos los input file con la clase inputFile. Como podemos ver, al plugin se le pueden pasar varios parámetros como la imagen que vamos a utilizar, su tamaño, el tamaño del input, etc.

Luego sólo tendriamos que crear el input file en nuestro formulario con el nombre de la clase inputFile:

<label>Cargar fichero:</label>
<input class="inputFile" type="file" />

A continuación el ejemplo en funcionamiento. En el siguiente enlace puedes descargar el plugin.

Cargar fichero: