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.

examinar

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:

<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.

<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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(5 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Una respuesta a “Button Upload Select”

  1. keila dice:

    hola muy bueno el ejemplo ,pero necesito saber como hacer visible los archivos cargados .

    gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre