Foro de elhacker.net

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.

$('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 (https://github.com/jaysalvat/ezdz/blob/master/src/jquery.ezdz.js#L302):

// 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!

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:

$('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:

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')

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