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…
Buena Solución y funciona perecto. Muchas gracias.
de nada!!
Hola!!! Lo uso en una tabla, esteticamente quedo muy bueno, no logro poder seleccionar el archivo, no se pone la manito. Gracias
habria q ver el codigo, es posibles q no lo tengas bien formado el html
para que se ponga la manito cuando tengas el cursor encima pon en css cursor: pointer; y ya con eso tienes la solución. Saludos
Sencillamente útil y bien explicado, muchas gracias.
Saludos desde Nicaragua.
de nada, me alegro que te haya servido
hola gracias por la ayuda, al fin pude cambiar esto que tanto rollo a mi cabeza le estaba dando, pero tengo una gran incontrovercia y mis problemas no se acaban hasta no resolver esto… COMO PUEDO HACER PARA QUE EL NOMBRE DEL ARCHIVO QUE SE SUBA… QUEDE DEBAJO DEL BOTON, QUE AUN NOUEDO, CONSEGUI CAMBIARLE EL COLOR CON EL SIMPLE ID .. ERO NO MAS, NI TAMAÑO NI NADA.
hay q ver que quieres excatanete y poner el boton donde necesites, yo intentaria mover el boton más que el texto.
como hago para que me muestre el nombre del archivo que e seleccionado?
tal y como está hecho el script tienes que crear un elemento como un div con la id=»info» y aahí aparece el nombre del archivo subido.
Muchas gracias! Muy buen ejemplo, y muy claro.
Me alegra que te haya servido!
Hola
Gracias a tu código he podido personalizar mi input file para mi ejercicio de Diseño de interfaces
Saludos
Me alegro que te haya servido 🙂
TENGO UNA DUDA, ANTES, CON EL INPUT ME SALIA EL NOMBRE DEL ARCHIVO, Y AHORA YA NO SALE MAS 🙁 QUE PUEDO HACER
Hola Rogelio, mira que tengas todo correcto, el div.info tiene como función mostrar la información que se recoge desde file-upload en el javascript
Tal y como está debe de mostrarte el archivo se esta subiendo así que seguramente sea un error tipográfico el que estas sufriendo.
Un saludo.
hola, me surge un error cuando cargo el archivo, aparece:
Error in parsing uploaded binary request. The most likely cause for this error is the incorrect setup of AspMaxRequestEntityAllowed in IIS MetaBase.
favor sabras porque sucede este error?
muchas gracias.
Hola Patricio, intuyo que estás trabajando con un servidor IIS con ASP, yo estoy acostumbrado a trabajar en Apache. Pero creo que se trata del tamaño del archivo o de alguna variable del servidor que tengas que configurar…
horas buscando y aqui estaba la solución… muchas gracias
Gracias a ti por comentar. Me alegra que te haya servido!
Hola, es genial, un ejemplo sencillo y perfecto. Pero me surge un problema, antes podía arrastrar los ficheros y ahora me es imposible. Hay alguna forma de poder hacerlo. Muchas gracias por todo.
pues la verdad es q no se por que no te funciona el arrastrar, por que lo unico que hacemos es cambiar el boton pero no la funcionalidad… ¿te da algun error la consola?
Gracias por tu contestación, no me aparece ningún mensaje, únicamente cuando lo arrastro del explorador de windows y lo suelto en el botón me abre el archivo jpg, pdf… en el navegador. En cambio si dejo el botón normal me lo añade para subirlo.
Excelente, muchas gracias has salvado el dia
me alegro mucho que te haya servido.