Contáctenos

6ta. Avenida 2-48 zona 13, Guatemala, Guatemala.

T +(502) 2458-4464 • Email: info@pixtig.com

Escribenos o saludanos :)

Cotización
Su presupuesto en dólares ($)
Sitio Web actual (solo si cuenta con uno)
Deseo ser parte del equipo
¿Qué tal?
¿Nos ayudas?

Blog

Somos apasionados de Drupal y obsesionado con la adición de contenido significativo a la web. Diseñamos, programamos, desarrollamos, comunicamos, enseñamos y blogueamos.

Imagen de jorge

Sustituir los campos de tipo "file" por una imagen

By: 
jorge
Tags: 
Javascript
Input
File

Seguramente nos hemos visto en la situación de que en el diseño de una aplicación o sitio web, cambian el estilo de los input de tipo file.

En este pequeño artículo veremos una manera sencilla de solventar ese inconeviente de una manera muy sencilla usando javascript.

A continuación el script. (está comentado y es simple saber que hace cada línea)

Código: 
var $ = jQuery.noConflict();
$(document).ready(function() {
	/**
     * Busca los input de tipo file y los 
     * reemplaza por una imagen que dispara el input file
 	 * únicamente es necesario agregar la clase "filetype" al contenedor de los elementos
 	 * img.typeFile y span.fileDir y el input file que se reemplazará.
 	 *
 	 * Ejemplo de estructura:
 	 * ------------------------------------------------------------------------------------------
 	 *
 	 * <div class="form-item filetype">
     *     <label class="labelform">Foto
     *      <span class="small">Imagen en formato JPG o PNG</span>
     *    </label>
     *      <img class="typeFile" src="template/images/agregar.png"><span class="fileDir"></span>
     *      <input type="file" name="archivo" class="form-file"/>
     * </div>
     */
    $('div.filetype').each(function(f) { // Recorremos el elemento padre (ver ejemplo arriba)
        $(this).find('input[type="file"]').addClass('file-' + f); // Asignando una clase dinamica
        $(this).find('input[type="file"]').css('cssText', 'display:none;'); // Deshabilitando los inputs de tipo file dentro del form.
        $(this).find('img.typeFile').on('click', function() { // Evento click del disparador del input de tipo file (una imagen o un boton, depende de sus diseños)
        $(this).css('cssText', 'opacity:1;'); // Simple efecto de opacidad
        $(this).parent().find('input[type="file"]').trigger('click'); // Elemento que ejecuta el input de tipo file que está oculto
            $(document).delegate('.file-' + f, 'change', function() { // Busca algún cambio en el input de tipo file
                if (this.value == "") {
                    /* Busca si el input esta vacio y le setea valor predeterminado */
                    $(this).parent().find('.fileDir').html('<span style="color:#D0D0D0;">No se ha seleccionado nada.</span>');
                } else {
                    /* Si hay un valor seleccionado por el usuario, lo obtiene y lo muestra en una etiqueta span con la clase "fileDir" */
                    $(this).parent().find('.fileDir').html(this.value);
                    $(this).parent().find('.fileDir').css('cssText', 'color:#000;');
                };
            });
        });
    });
});