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