Se puede hacer. Y al menos que yo sepa hay dos formas de hacerlo, usando solo CSS o una combinación de CSS con Javascript (JQuery).
Te digo cómo se haría con esta segunda opción.
Insertamos un elemento <button> dentro de nuestro código, que será visible y será el que lance el cuadro para elegir el archivo:
Código HTML:
<button type="button" class="upload_btn">Elegir imagen</button>
La segunda parte, sería la parte del <input>
Código HTML:
<input type="file" name="file_name" class="upload_file invisible" accept="image/*">
CONSIDERACIONES: 1) El atributo accept no es soportado por IE9 y anteriores, y tampoco para Safari 5. 2) He añadido la clase 'invisible' para ocultarlo
La parte de CSS para ocultar el input es la siguiente:
Código:
.invisible{visibility:hidden;height:0;width:0;}
¿El por qué no se utiliza 'display:none'? Porque Safari impide acceder a los eventos de un elemento not displayed, por eso tenemos que engañarle un poco
Y ahora, la parte de JQuery:
Código HTML:
<script type="text/javascript">
$(".upload_btn").click(function(event){
$(".upload_file").click();
event.preventDefault();
});
//Si quieres hacer submit automático después de elegir el archivo:
$(".upload_file").change(function(event){
$("#form_id").submit(); // donde form_id es la id de tu formulario
event.preventDefault();
});
</script> El uso de event.preventDefault() es necesario para que los eventos que tienen por defecto los elementos no se ejecuten.
La parte pura de CSS se haría poniendo debajo justo de un <div> que simule un botón el <input type="file">, jugando con las posiciones y la opacidad. De esta manera, cuando se hiciera click en el div, se estaría haciendo click realmente en el input.
Espero haberte ayudado.
Saludos.
