Modificar el input file

Posted by On marzo 02, 2018 26 Comments

Una de las cosas que peor han evolucionado en los navegadores ha sido el input file, de hecho enfrentarse a cualquier cambio en este tipo de campo es como enfrentarse a un caballero con armadura completa, mandoble y yelmo completo, con una daga, pero por suerte hay una forma de vencerla, y eso es lo que os voy a explicar.

Lo primero que tenemos que hacer es crear una estructura html que nos va a servir para trabajar.

<label for="file-upload" class="subir">
    <i class="fas fa-cloud-upload-alt"></i> Subir archivo
</label>
<input id="file-upload" onchange='cambiar()' type="file" style='display: none;'/>
<div id="info"></div>
<input type="submit" value="Enviar">

En este código yo he introducido un icono de font awesome dentro del label para dar mas estilo pero es indiferente lo que pongamos.

Es muy importante que el atributo for del label sea la id del input, para que lo ataque.

En este código vemos también que tenemos un onchange dentro del input para llamar a una función javascript. Dicha función podemos tenerla en un archivo aparte o dentro de las etiquetas <script></script>

El script es:


function cambiar(){
    var pdrs = document.getElementById('file-upload').files[0].name;
    document.getElementById('info').innerHTML = pdrs;
}




Lo que hace este script es tomar el nombre del archivo que queremos subir y ponerlo dentro el elemento con la id info para que podamos verlo.

Ya tan solo nos falta poner un poco de estilos a nuestro nuevo botón, para ello haremos los siguiente:


.subir{
    padding: 5px 10px;
    background: #f55d3e;
    color:#fff;
    border:0px solid #fff;
}

.subir:hover{
    color:#fff;
    background: #f7cb15;
}

De esta forma ya podemos hemos logrado modificar el input file.

Cómo se puede ver es bastante sencillo vencer a este caballero armado una vez que se entiende, por ello he querido explicarlo aquí paso a paso y mostrar que con solo unas líneas de código podemos tener resultados como este:

Si os ha servido, compartir y dejad algún comentario  con vuestras dudas y observaciones…