';

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus risus mauris, et commodo lectus hendrerit ac. Nam consectetur velit et erat fermentum aliquet. In laoreet, sem sit amet faucibus pulvinar, purus tellus tincidunt ex, vel blandit nibh dui sit amet justo.

Menú

Cómo personalizar un input file

Un input file nos permite interactuar con el sistema operativo enviando ficheros desde nuestro ordenador al servidor remoto. Es decir, permite adjuntar archivos para luego poder ser enviados.

Sin duda es uno de los elementos que más se descuidan a la hora de diseñar. Se suelen dejar en su diseño inicial bastante básico y donde cada navegador web lo interpreta de una forma diferente.

Ejemplos de personalización de un elemento input file

Con este artículo aprenderás a personalizar un input file, dándole un estilo más bonito, funcional en todos los navegadores, responsive y se conseguirá mediante un poco de CSS y JavaScript. Cuando se seleccione un archivo, el elemento input file mostrará el nombre del archivo seleccionado, también se podrá seleccionar varios archivos a la vez mostrando el número de archivos que han sido seleccionados.

En los ejemplos que pongo a continuación, en la página de CodePen, se puede personalizar el input file en siete estilos diferentes, donde podrás cambiar el CSS y el HTML para que quede más a tu gusto. El resultado será el siguiente.

Ver ejemplos en CdePen

Código para personalizar un input file

Para empezar descarga los archivos, el enlace se encuentra abajo del todo. Dentro del archivo descargado encontrarás tres carpetas. Abre la carpeta js que contiene tres archivos. En verdad solo necesitas el archivo custom-file-input.js. Los archivos jquery.custom-file-input.js y jquery-v3.4.1.min.js sólo los utilizarás en lugar del otro si lo quieres hacer mediante jQuery. Este código de JavaScript lo que hace es mostrar el nombre del archivo seleccionado. Tener el atributo [multiple] permite a los usuarios seleccionar más de un archivo.

En la carpeta css encontrarás el archivo file-input.css. Aquí se encuentran los estilos de los ejemplos antes vistos. Puedes cambiarlos al estilo de tu web para que quede mucho mejor.

Para acabar, sólo te quedará ver el código HTML. Tienes el código de todos los estilos en el archivo que hay dentro de la carpeta demo.

¿Quieres saber más recursos? Suscríbete al newsletter

Y recibirás un email cada vez que se publique un artículo nuevo.



    Cómo personalizar un input file en Contact Form 7 de WordPress

    Si tu web la has realizado con WordPress y utilizas el famoso plugin Contact Form 7 para los formularios, esto te vendrá muy bien para personalizar un input file y que funcione.

    Para poner un input file en Contact Form 7, lo solemos hacer, por ejemplo, de la siguiente forma:

    [file archivo id:file-2 class:inputfile limit:1mb filetypes:pdf]
    

    Me aprovecharé del código anterior HTML para dejarlo de la siguiente manera:

    [file archivo id:file-2 class:inputfile limit:1mb filetypes:pdf]
    <label for="file-2">
    <span class="inputfile-personalizado">ADJUNTAR ARCHIVO</span>
    <svg class="inputfiles" width="16.647" height="14.497" viewBox="0 0 16.647 14.497"><g id="archivo-adjunto" transform="translate(0.374 -31.024)"><g id="Grupo_202" data-name="Grupo 202" transform="translate(0 31.174)"><path id="Trazado_3912" data-name="Trazado 3912" d="M14.65,32.644a5.034,5.034,0,0,0-7.111,0L1.026,39.158a3.509,3.509,0,0,0,4.963,4.963L12.5,37.607a1.991,1.991,0,1,0-2.816-2.815L4.247,40.233a.472.472,0,1,0,.668.668l5.441-5.441a1.046,1.046,0,0,1,1.479,1.479L5.321,43.453a2.565,2.565,0,0,1-3.627-3.627l6.514-6.514a4.083,4.083,0,1,1,5.774,5.774l-5.44,5.441a.472.472,0,1,0,.668.668l5.44-5.441a5.028,5.028,0,0,0,0-7.111Z" transform="translate(0 -31.174)" fill="#071d49" stroke="#071d49" stroke-width="0.3"/></g></g></svg>
    </label>
    

    Hay varias clases puestas para que puedas dar estilo al input file. Puedes ver los ejemplos de antes para inspirarte.

    Ahora hará falta un poco de JavaScript, yo de normal pongo el siguiente código dentro de un archivo que tengo creado como scripts.js y alojado dentro de la carpeta js de mi Child Theme.

    // Personalizar input file
    jQuery(document).ready(function(e) {
    	if(jQuery('.inputfile').length > 0)
    	{
    		var inputs = document.querySelectorAll( '.inputfile' );
    		Array.prototype.forEach.call( inputs, function( input )
    		{
    			var label	 = jQuery('.inputfile-personalizado'),
    				labelVal = label.innerHTML;
    	
    			input.addEventListener( 'change', function( e )
    			{
    				var fileName = '';
    				if( this.files && this.files.length > 1 )
    					fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
    				else
    					fileName = e.target.value.split( '\' ).pop();
    	
    				if( fileName )
    					jQuery('.inputfile-personalizado').text(fileName);
    				else
    					label.innerHTML = labelVal;
    			});
    		});
    	}
    });
    

    Con este código conseguiremos que se muestre el nombre del archivo seleccionado. Es muy parecido al código que puse en Codepen, lo podría haber resumido un poco más pues este no será múltiple, sólo se podrá adjuntar un archivo. Si quieres que se puedan adjuntar más, sería repetir el código anterior cambiando el nombre en file, archivo era en el ejemplo, el id de file y for de label ,en el ejemplo anterior era file-2, y aparecería uno debajo del otro.

    También se puede utilizar algún plugin como Drag and Drop Multiple File Upload o Multiline files upload for contact form 7 Pro, este último de pago.

    Paso una imagen de como quedaría con un poco de CSS:

    como personalizar un boton input file img1 - iborra web design

    Recuerda luego en Contact Form 7 poner el shortcode en archivos adjuntos, en el ejemplo anterior sería [archivo]. Si pones más de uno, pues uno debajo del otro.

    A continuación te dejo el enlace de descarga con todos los archivos.

    !Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design

    Comments
    Compartir
    Paco (Iborra Web Design)

    Artículos destacados

    Leave a reply

    ¿Necesitas ayuda? Escríbeme por Whatsapp