@alterebro

NiceFileInput,js es un plugin de jQuery para modificar los estilos CSS del control de formularios en las etiquetas input de subida de archivos de tipo file (input type="file").

Personalizar los elementos de subida de archivos en los formularios es una tarea que requiere de tiempo, paciencia y además no obtiene los mismos resultados dependiendo del navegador. NiceFileInput elimina ese molesto proceso y te permite concentrarte simplemente en el estilo CSS de los elementos del control: el boton de subida, la caja de texto y el contenedor de ambos.

El Script degrada correctamente y si el usuario no tiene activado javascript en el navegador, se mostrará un elemento común <input type="file" />.
NiceFileInput.js es un script basado en el trabajo previo de Shaun Inman, quien definio el concepto básico detras de NiceFileInput ( Personalizando controles de archivo con CSS y el DOM [EN] ) y el de Mika Tuupola, quien implemento de forma elegante la idea en un plugin jQuery pero con ciertas limitaciones ( FileStyle ). Asi que la mayor parte del credito de este plugin va para ellos.

Ejemplos y Descarga

Puedes ver una demo aquí: NiceFileInput.js o descargar el código desde la página del repositorio en GitHub alterebro / jQuery.NiceFileInput.js.

Requerimientos

NiceFileInput requiere de la libreria jQuery, disponible en el website jQuery.com o a través de la red de distribucion de contenido de Google: Librerias alojadas, Google CDN

Modo de uso

1. Primero asegurate de incluir la libreria jQuery y el plugin NiceFileInput en tu página.

   Usando una copia local de jQuery:

   <script src="/your_path/jquery.min.js"></script>
   <script src="/your_path/jquery.nicefileinput.min.js"></script>

   O usando Google CDN:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
   <script src="/your_path/jquery.nicefileinput.min.js"></script>

2. Añade el código que activa el plugin en los elementos jQuery donde quieras aplicarlo

   <script type="text/javascript">
   /* <![CDATA[ */
   $(document).ready(function(){
    // your code...
    $("input[type=file]").nicefileinput();
   });
   /* ]]> */
   </script>

   Puedes opcionalmente establecer el valor por defecto del texto en el botón de carga:

   $("input[type=file]").nicefileinput({ 
    label : 'Examinar...' // Custom label
   });

Personaliza con CSS el File-Input

Puedes personalizar completamente el estilo y aspecto del control de formulario de dos formas:

Usando el mismo código CSS para personalizar todos tus elementos file-input a través de las siguientes clases:

.NFI-wrapper {
 // div contenedor
}
.NFI-button {
 // botón
}
.NFI-filename {
 // elemento text-input que muestra el valor del archivo.
}

O estableciendo un valor al atributo class de el elemento input-file que quieres personalizar individualmente.

// Define una clase en el elemento input HTML
// <input type="file" class="nice" />
// Ahora puedes estabelcer tu código CSS del siguiente modo:
.nice {
 // div contenedor
}
.nice .NFI-button {
 // boton
}
.nice .NFI-filename {
 // text input que recoje y muestra el valor
}

Etiquetas: graceful degradation, javascript, jquery, plugin