Estilo en input file

Hola a modo de bitácora comparto este pequeño truquito útil.
Poder darle un estilo o “apariencia” al elemento input file de html. Si bien para mi gusto el input file estandar está mas que bien, siempre hay clientes que quieren algo mas a su gusto. Voy a explicar una técnica muuuuy sencilla para hacerlo:

1) Escribimos el input file en HTML obviamente😀

<!– Campo ficticio para simular el path del archivo –>
<input type=”text” id=”url-archivo” />

Obtenemos algo como esto 0

2) Agregamos un campo “input text” ficticio que servirá para simular el path del archivo que seleccionemos

<!– Campo ficticio para simular el path del archivo –>
<input type=”text” id=”url-archivo” />

<!– Campo original file –>
<input type=”file” id=”archivo” name=”archivo” />


3) Agregamos un label para simular el botón “seleccionar archivo” envolviendo al input file

<!– Campo ficticio para simular el path del archivo –>
<input type=”text” id=”url-archivo” />

<!– label para simular el boton “seleccionar archivo” –>
<label class=”cargar”>
subir<span>
<!– Campo original file –>
<input type=”file” id=”archivo” name=”archivo” />
</span>
</label>

El resultado:1

4) Usamos jquery para detectar el cambio (change) del elemento input, osea cuando selecciona el archivo y el valor del path escribirlo en el input text ficticio. Puedes usar cualquier framework js o bien hacerlo con javascript puro, en este caso lo resolvemos con jquery.
$(document).ready(function() {
/* En el change del campo file, cambiamos el val del campo ficticio por el del verdadero */
$('#archivo').change(function(){
$('#url-archivo').val($(this).val());
});
});

5) Agregas el estilo CSS que necesitas, teniendo en cuenta 2 cosas a) Ocultar el input file original, b) lograr que el label parezca un botón.
Por ejemplo

/* Ocultamos el input file */
input[type="file"]{
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
opacity: 0;
filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
margin: 0;
padding:0;
left:0;
}


/* Al label lo convertimos en "boton"
(en apariencia) */
.cargar{
text-align: center;
background-color: #8E789B;
color: #fff;
display: block;
border-radius: 3px;
width: 190px;
height: 30px;
font-size: 18px;
float: left;
line-height: 1.6em;
}

El resultado 2
PD: El path lo pueden formatear a gusto, este post es simplememnte explicativo, para ver bien el código e implementarlo como les parezca pueden copiarlo desde http://jsfiddle.net/jositux/Jya4G/2/

13 pensamientos en “Estilo en input file

  1. Keiner dice:

    ayudame a como hiria el archivo completo no logro que me lea el jquery lo llamo y nada lo coloco directo y tampoco

  2. apollocreed dice:

    como modificas el path para que se vea mejor?

    que en lugar de “C:\fakepath” aparezca la ruta real

  3. Migueledo Nuñez dice:

    Muy interesante y util el articulo, muchas gracias por escribirlo. Yo hacia algo parecido pero ocultando el input file encerrandolo en etiquetas …, pero entonces el “change” no funciona en Safari. Con esta solucion funciona en todos los navegadores. Saludos desde Costa Rica.

  4. omega dice:

    muchas gracias por tu codigo me has sacado de un apuro

  5. jumpering dice:

    Grande! Me ha servido de ayuda tu codigo!
    Gracias!!

  6. Emanuel dice:

    Muy buen post! de gran ayuda para personalizar los botones feos de imput por defecto.

  7. Hernan dice:

    Amigo no logro que con jquery que me lea el valor del input file y lo ponga en el input text

  8. xwolverine dice:

    No he podido con el ejercicio, puedes por favor ayudarme y me regalas el ejercicio completo?, muchas gracias

Dejá una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: