Dar Estilos A Campos De Entradas
Anteriormente habíamos hablado de un útil plugin para la creación de un cargador de archivos. En este post se hablara de como dar estilo un input file de forma rápida y sencilla, sin dejar de ser funcional. Este tipo de entrada por lo general no permite mucha personalización, pero con algunos trucos de JavaScript podemos crear nuestro propio input file que coincida con el look de nuestra página web.
El HTML
Utilizando el elemento HTML estándar para la entrada de archivos, tambien vamos a crear nuestra entrada de archivo que se oculte y vamos a crear otro botón que con un poco de la magia de javascript y con un clic en él nos abrirá una ventana para cargar el archivo:
[html]
<input type="file" id="file">
<button id="select">Select some files</button>
<span class="name"></span>
[/html]
Como se puede ver, también tenemos un span con la clase name, este span contendrá el nombre del archivo.
Antes de pasar al código JavaScript necesitamos algo de CSS con el fin de hacer desaparecer el input, pero aún estará activo a través de JavaScript y para eso tenemos que establecer su visibilidad, para que pase a oculta, y también establecer su anchura y altura a 0 del siguiente modo:
[css]
#file{
visibility: hidden;
width: 0;
height: 0;
}
[/css]
El JavaScript
El primer paso para tener nuestro input file, es imitar el evento click en el input cuando el usuario está realmente haciendo clic en el botón de botón «falso» y para ello sólo tiene que comprobar que el usuario ha hecho clic en el botón. Esto con la finalidad de asegurarnos de tomar el archivo que deseemos cargar.
[js]
$(‘#select’).click(function(e) {
$(‘#file’).click();
});
[/js]
Si hace clic en nuestro botón verá que el cuadro de diálogo del archivo que ya aparece pero cuando seleccionamos un archivo no pasa nada en el span y para eso necesitamos otra función que se activará cada vez que nuestros cambios en el input suceden de alguna manera y cuando lo hace es necesario para almacenar el valor de la entrada (el valor es la ruta a nuestro archivo ):
[js]
$(‘#file’).change(function() {
var value = $(this).val();
$(‘.name’).html(value);
});
[/js]
Si verifica lo anterior en el navegador puede ver que funciona, pero existe un problema, muestra la ruta del archivo, mas no el nombre del archivo, el cual debería de verse solamente. Para lograr esto tenemos que dividir el valor de una barra invertida y esto va a devolver una matriz de todos los hilos que están antes y después de cualquier barra invertida y como queremos que la última cadena en la ruta sea la que llegue y mostrar esta en el span.
[js]
$(‘#file’).change(function() {
var value = $(this).val(),
path = value.split("\\"),
file = path[path.length-1];
$(‘.name’).html(file);
});
[/js]
Antes de mostrar como quedara este cargador de archivos, mostraremos el CSS responsable de hacer mas llamativo el ejercicio:
[css]
#file {
visibility: hidden;
width: 0;
height: 0;
}
#select {
width: 150px;
height: 70px;
background: #2ecc71;
border: none;
color: white;
font-weight: bold;
font-size: 18px;
box-shadow: 2px 2px 1px #27ae60;
border-radius: 5px;
float: left;
}
#select:hover {
box-shadow: 1px 1px 1px #27ae60;
}
.name {
color: #3498db;
font-size: 16px;
font-weight: bold;
background: #ecf0f1;
display: block;
border-radius: 0px 5px 5px 0px;
float: left;
padding: 1px 6px;
height: 60px;
width: 200px;
font-size: 14px;
padding-top: 10px;
position: relative;
z-index: -1;
}
[/css]
Si ejecutamos el ejercicio veremos lo siguiente:
Input file oculto, solo esta visible el botón y el span, en este ultimo mostraremos el nombre del archivo seleccionado:
Una vez pulsemos el botón «Select some files» veremos la ventana emergente, la cual reemplazara el input file, para seleccionar el archivo:
Una vez seleccionemos el archivo (marketing-online.png en en este ejemplo), se mostrara el nombre en el span:
