<input type="file" />.En internet podemos encontrar posibles formas de hacerlo, pero la mayoría de ellas requieren utilizar API’s de flash o de librerías como jQuery y Mootools. Puede ser una buena opción pero solomente deseamos un simple botón que tenga la funcionalidad para subir archivos sin tanto código. También hay códigos creados por usuarios en foros o blogs, pero lamentablemente la mayoría usan Javascript y/o CSS y no suelen funcionar bien en los principales navegadores: Firefox, IE, Chrome, Safari y Opera.
Bueno, pues logré crear un custom input file mediante un par de lineas usando solamente CSS y sus respectivas etiquetas HTML.
El código CSS es:
.custom-input-file {
overflow: hidden;
position: relative;
cursor: pointer;
}
.custom-input-file .input-file {
margin: 0;
padding: 0;
outline: 0;
font-size: 10000px;
border: 10000px solid transparent;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
right: -1000px;
top: -1000px;
cursor: pointer;
}
EL código HTML es:overflow: hidden;
position: relative;
cursor: pointer;
}
.custom-input-file .input-file {
margin: 0;
padding: 0;
outline: 0;
font-size: 10000px;
border: 10000px solid transparent;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
right: -1000px;
top: -1000px;
cursor: pointer;
}
<div class="custom-input-file"><input type="file" size="1" class="input-file" />
Subir archivo
</div>
Con este par de lineas de código pueden personalizar un input file a su gusto, como agregar imagen de fondo, efectos visuales al pasar el mouse, bordes, etc. Es compatible con todos los principales navegadores.Subir archivo
</div>
Ahora, ¿cómo personalizar un input file usando este código?
Muy fácil, pueden modificar o agregar estilos a su gusto a excepción de lo siguiente:
- No modificar nada en
.custom-input-file .input-filea excepción del cursor. - No modificar
overflow: hidden; position: relative;en.custom-input-file, pueden agregar más estilos. - Todo el contenido que agreguen dentro del div custom-input-file, debe ir despues de la etiqueta
<input type="file">, no antes. - Cuando cambien el cursor, deben cambiarlo en
.custom-input-filey.custom-input-file .input-file.
Pueden ver el ejemplo más detallado aquí:
http://jsfiddle.net/angelfcm/nETSD/
Publiquen sus comentarios, gracias.
.....
ResponderEliminarMe fascina la idea de este blog, La recomiendo ampliamente. +1
ResponderEliminargenial, no había encontrado cómo hacerlo de una forma tan sencilla... gracias.
ResponderEliminarComparada con las otras que he encontrado es realmente sencilla y elegante...muchas gracias
ResponderEliminarMuchas gracias por sus excelentes comentarios, me alegra que les haya servido.
ResponderEliminaren qué parte del código debo de meter lo de java? no encuentro dónde y ya poniéndolo a funcionar no me muestra el nombre del archivo se queda en ...
EliminarLa parte del javascript utiliza jquery, por lo que tendrás que descargar el plugin de jquery. Una vez que lo integres a la página, el código lo cargas en la cabecera de la misma o bien, lo llamas desde un archivo .js externo; para cualquiera de las dos opciones, debe ir después de haber llamado el archivo de jquery.
EliminarMe encanto funciono de maravilla felicidades y muchas gracias por este aporte excelente (Y)
ResponderEliminarMuy buen articulo, pero estoy teniendo un problema con IE 9 y tambien con Firefox, si por ejemplo selecciono un archivo a subir y sin enviarlo y apreto F5 se actualiza el navegador y en el caso de IE queda en blanco, en firefox queda el campo archivo sin el texto pero si apreto subir lo sube
ResponderEliminarHola Laura, mucha gracias por tu comentario. He revisado lo que mencionas y es cierto, pero a mi me sucede en Chrome e IE (en Firefox no). Lo que sucede en realidad es que el texto desaparece como un display:none, el motivo es que si aplicas la fuente Calibri a casi cualquier elemento con un valor de la propiedad display distinto a "inline" por alguna extraña razón sucede este problema.
EliminarNo solo pasa con mi código para el input file sino que es igual con cualquier elemento que cumpla las condiciones que acabo de mencionar.
Por ejemplo:
<div style="font-family: calibri">Esto no se ve.</div> <a style="font-family: calibri; display: block">Esto no se ve.</a> <div style="font-family: calibri; display: inline">Esto si se ve.</div> <br /> <a style="font-family: calibri;">Esto si se ve.</a>
Como ves la fuente calibri y display != "inline" causan el problema.
Probablemente eso se deba al estándar del documento, hay que evitar utilizar la fuente calibri y siempre estandarizar con HTML, es decir, poner al principio de todo documento .
Ya he actualizado el ejemplo del input file, prueba de nuevo y coméntame como te fue.
Saludos!
Angel, gracias por tu respuesta!!
EliminarTe cuento que con el cambio en la funcion se soluciono el problema en IE, tambien funciona bien en chrome, en Firefox graficamente se ve bien pero existe un problema, me pasa lo siguiente:
Si selecciono un archivo y apreto F5 sin subirlo, se recarga la
pagina con todo ok! pero si apreto enviar archivo sin haber seleccionado antes me envia igual el archivo que habia cargado en un inicio...
Hola buenas,
ResponderEliminarAntes de nada mil gracias por compartirlo, pero...
Lo he copiado tal y como está y no me funciona :(
Los estilos y demás están bien, me lo pone todo correctamente, pero al hacer click en el botón, no hace nada. Creo que algún fallo tengo en la función:
$(document).ready(function(){
$(".custom-input-file input:file").change(function(){ $(this).parent().find(".archivo").html($(this).val());
}).css('border-width',function(){
if(navigator.appName == "Microsoft Internet Explorer")
return 0;
});
});
Si alguien puede ayudarme...
Muchas gracias de antemano.
¡Un saludo!
¡Solucionado!
ResponderEliminarHe tenido que modificar el script a:
$(document).ready(function(){
$(function(){
$('.custom-input-file input:file').change(function(){
$('.archivo').html($(this).val());
});
});
});
Por si a alguien le sirve ahí lo tiene.
Lo único que al cargar el PATH donde se aloja el archivo, me aparece el "FakePath"...
No sé si alguno de vosotros sabe cómo cargar la URL correcta en vez de esa.
Un saludo ;)
Y en Firefox no funciona por cierto
Eliminarque tal pues yo cambie el fakepath asi, no me parecio conveniente el mostrar toda la ruta, por lo largo que puede llegar a ser, espero te pueda servir
Eliminar$(function(){
$(".custom-input-file input:file").change(function(){
$(this).parent().find(".archivo").html($(this).val().replace("fakepath", "..."));
}).css('border-width',function(){
if(navigator.appName == "Microsoft Internet Explorer")
return 0;
});
});
Hola. ¿Podéis decirme dónde hay que añadir este trozo de código?
EliminarDe verdad, un trabajo genial, adoro que no se necesite java script (bueno o casi).
ResponderEliminarEstoy tratando de hacer mi página con html4.x, css2.x, php4.x y Mysql (jquery solo para las animaciones, transiciones y efectos secundarios no imprescindibles para la correcta navegación)
Y dejándola preparada para sacar con facilidad una versión HTML5 + css3 + (php + mysql).
Un aporte genial, muchísimas gracias.
Sé que no es mucho, pero tengo algunos botones (type='submit') hechos con divs animables, compatibles con los principales navegadores. Es un código sencillito (solo css y html) pero se consiguen iconos sorprendentes con 4 radious y un par de :hover bien posicionados. Si te pica la curiosidad en dos o tres meses publicaré mi página y por supuesto todo el código. ^_^
Gracias de verdad.
Gracias a ti, es bueno saber que le encuentres utilidad y me gustaría ver tu página cuando esté terminada, saludos.
EliminarHola! la idea me parece muy buena, pero no acaba de funcionar bien, estoy en firefox y sale activo para la subida de archivos prácticamente todo el espacio que tengo vacío, es decir, allí donde no hay una capa con contenido, es activo el input, y la web es muy minimalista y muy limpia, de modo que pinche donde pinche, se abre la ventana de "examinar".
ResponderEliminarHe probado con los z-index, pero nada...si lo bajo mucho no es accesible, y si no lo bajo tanto está sobre todas las capas.
Alguna idea?
Arreglado tío, he modificado lo que dices que no se modifique, pero así he conseguido que sólo esté activo el botón que yo he hecho, (en mi caso de 200 px)
ResponderEliminarTe paso el código por si te sirve, y por cierto, mil gracias, es una pasada lo que has hecho. Mil gracias por compartir!!
.custom-input-file {
border: 1px solid #FFFFFF;
border-radius: 3px;
color: #FFFFFF;
cursor: pointer;
margin-left: 20px;
overflow: hidden;
padding: 5px;
position: relative;
text-align: center;
width: 200px;
}
.custom-input-file .input-file {
border-top: 27px solid transparent;
cursor: pointer;
font-size: 0;
left: -5px;
margin: 0;
opacity: 0;
outline: 0 none;
padding: 0;
position: absolute;
top: -5px;
width: 77px;
}
Puedes verlo en mgspain.com/contacto aún está en desarrollo pero bueno.
;-)
Hola! Felicitarte por tu web y por la ayuda que prestas...
ResponderEliminarYo tengo un problema para incluir el el archivo php en envio de la imagen... podrías ayudarme?
te dejo el codigo php que tengo hasta el momento:
$from = $_POST['email'];
$subject = 'formulario consulta web';
$message = 'From: ' . $_POST['name'] . "\n". 'Mensaje:' . $_POST['data'];
$headers = "From: ". $from . "\n";
mail ('info@catalunya1.info', $subject, $message, $headers);
header('Location: thanks.html');
podrías ayudarme a incluir el código que necesito para que el archivo llegue adjunto al mensaje?
Hola Yolanda, muchas gracias!,
EliminarMira para enviar un archivo adjunto, necesitas mucho más, ahorita no tengo contenido acerca de eso pero puedes buscar en google "Cómo enviar mail con archivos en PHP", saludos!
Muchas gracias por el aporte. Muy utlil.
ResponderEliminarExcelente! Muchas gracias!!
ResponderEliminarSegún veo funciona super bien, pero en mi caso no logro hacer que me funcione bien, logra cargar el archivo pero no me muestra la ruta, como puedo solucionarlo?. gracias.
ResponderEliminarEn el IE 11 no funciona correctamente. Desaparece el texto "Examinar"
ResponderEliminarHola Tocayo,
EliminarPara que no se borre la palabra Examinar en IE >= 11, dentro del $(function(){... habría que agregar las siguientes líneas de código:
//Begin: Bug fix IE >= 11
$(".custom-input-file input:file").focus(function(){
if(navigator.appName == "Netscape") {
$(this).css('position','relative');
setTimeout(function(){ $(".custom-input-file input.input-file").css('position','absolute'); }, 0);
}
});
//End: Bug fix IE >= 11
Este comentario ha sido eliminado por el autor.
ResponderEliminar