previsualizar imagenes subidas con jquery plugin ezdz

Iniciado por gAb1, 22 Diciembre 2015, 19:13 PM

0 Miembros y 1 Visitante están viendo este tema.

gAb1

Hola que tal! Necesito crear un formulario que previsualice las imagenes subidas usando el plugin ezdz. El problema es que tengo varios file inputs y tengo que hacerle un loop a "preview" para pasarle la dirección de cada imagen y que muestre cada una en un file input.

Código (javascript) [Seleccionar]
$('input[type="file"]').ezdz({
    text: 'Arrastrar imagen',
    preview:'url/or/path/to/image.jpg',
});


Para un solo file input serviria así, pero tengo varios y cada uno debe tener una imagen.

He creado un script php que recoge la información de las imagenes (nombre, tamaño, etc) del directorio donde están y codifica los datos en json. Con ajax recojo la info para guardarla en un objeto javascript. A partir de aquí es donde tengo dudas, porque no sé como hacerle un loop a "preview".

Este es el script del ezdz.preview:

Código (javascript) [Seleccionar]
// Inject a file or image in the preview
$.ezdz.prototype.preview = function(path, callback) {
    var settings  = this.settings,
        $input    = this.$input,
        $ezdz     = $input.parent('.' + settings.classes.main),
        basename  = path.replace(/\\/g,'/').replace( /.*\//, ''),
        formatted = settings.format(basename);

    var img = new Image();
    img.src = path;

    // Is an image
    img.onload = function() {
        $ezdz.find('div').html($(img).fadeIn());

        if ($.isFunction(callback)) {
             callback.apply(this);
        }
    };

    // Is not an image
    img.onerror = function() {
        $ezdz.find('div').html('<span>' + formatted + '</span>');

        if ($.isFunction(callback)) {
             callback.apply(this);
        }
    };

    $ezdz.addClass(settings.classes.accept);
};


Gracias!

gAb1

Al final encontré tiempo para seguir trabajando en esto. Dejo la solución para el que esté interesado:

Al parecer el plugin ya trae un método para crear un preview a partir de una imagen.

Con esto se inicializa el plugin en todos los file inputs:

Código (javascript) [Seleccionar]
$('input[type="file"]').ezdz({text: 'Arrastrar imagen'});

Para previsualizar las imagenes, normalmente es otro formulario (uno para subirlas y otro para quitar y añadir), facilmente se comprueba usando javascript:

Código (javascript) [Seleccionar]
if (window.location.pathname == '/url')
// o si la url es la misma y lo que cambia es el get
// habrá que crear una función pasandole el nombre del get
if (getUrlParameter('option') == 'img')

Código (javascript) [Seleccionar]
var to = 'to/',
   image = 'image.jpg';
$('input[type="file"]').each(function(i) {  // i is the index, if needed.
   $(this).ezdz('preview', 'http://www.website.com/path/' + to + image);
});

Si solo teneis 1 input quitar el each().