Button Upload Select

Los navegadores de hoy en día tienen varios campos que nos vienen muy bien para implementar nuestros formularios. Los inputs, los selects, los textareas, etc.

Estos campos tienen un aspecto básico que en la mayoría de los casos siempre se tienen que cambiar su aspecto. Es en este punto don podríamos tener problemas.

En este artículo nos vamos a centrar en una de las formas para poder personalizar totalmente el botón de upload de archivos o examinar archivos en el disco duro para subir.

Seguro que hay otras formas pero yo me he ayudado de jQuery para llegar a una solución y me gustaría compartirlo.

El código HTML que añadiría sería algo por el estilo a lo siguiente:

Source code

<input style="display:none;" type="file" id="product_image" name="product_image" value="" size="chars" />
<button class="fileSelect" name="product_image">Upload Image</button>

En el código anterior, si te fijas tenemos un input tipo file escondido y un botón simple con una clase.

Después, justo debajo o en la cabecera podremos añadir el código jQuery que simularía el click del input file a través de nuestro botón personalizado.

Source code

<script type="text/javascript">
$(document).ready(function(){
    $('.fileSelect').click(function() {
         $('#product_image').click();
    });
});
</script>

Es importante saber que para implementar este ejemplo necesitaremos incluir la librería jQuery en la cabecera de nuestra página.

Ver ejemplo en funcionamiento