0

tengo un container para mostrar una vista previa de las imágenes que se han subido y desde hace unos días no me funciona el evento addEventListener de una función en javascript. Debo decir que cuando lo desarrollé lo estuve testeando y funcionaba así que no se en qué momento ni porqué ha dejado de funcionar. No he hecho ningún cambio en la función. Os pido vuestra ayuda porque he probado a llamarla de otras formas (.onload) y no logro que se muestre la imagen.

let num=0;
function readImage() {
	if (window.File && window.FileList && window.FileReader) {
		var files = event.target.files; //FileList object
		var output = $(".preview-images-zone"); //--> div contenedor de imagénes

		for (let i = 0; i < files.length; i++) {
			var file = files[i];
			var idImg = (file["name"].split(".")[0]).replace(/ /g, "");
			if (!file.type.match('image')) continue;

			var picReader = new FileReader();

			picReader.addEventListener('load', function (event) { // --> aqui no entra
				var picFile = event.target;
				var html = '<div class="preview-image preview-show-' + num + '" id="' + idImg + '">' +
					'<div class="image-cancel" data-no="' + num + '">x</div>' +
					'<div class="image-zone" id="image-zone-' + num + '"><img id="pro-img-' + num + '" src="' + picFile.result + '"></div>' +
					'</div>';

				output.append(html);
				num = num + 1; //--> no hace la suma
			});

			picReader.readAsDataURL(file);
		}
	} else {
		console.log('Browser not support');
	}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML:

    <fieldset class="form-group" id="fieldsetId">
            <a id="uploadLink" href="javascript:void(0)" data-no="0">Subir imagen</a>
            <small class="form-text text-muted">Sólo jpg,jpeg,png y gif con tamaño máximo de 5 MB.</small>
            <input type="file" id="pro-image" name="pro-image[]" accept="image/*" onchange="readImage()" class="form-control" multiple>
        </fieldset>
        <div id="imgContainer" class="preview-images-zone"></div>

7
  • ¿Te has asegurado que no entra con un console.log() al principio de la función? ¿Has comprobado que la variable file este bien? el 12 mar. 2019 a las 10:50
  • File contiene la imagen que he seleccionado y he puesto un console.log() dentro del addEventListener y variables y no hace nada.. Por más vueltas que le doy no consigo ver el fallo. ¿Puede ser un problema de configuración? he comentado que antes si me funcionaba y el código es el mismo
    – MariaJo
    el 12 mar. 2019 a las 11:04
  • El código funciona, no veo el problema. Voto como no reproducible. Si no te funciona mira los errores de la consola y comprueba otras partes del código. el 12 mar. 2019 a las 11:10
  • Efectivamente el código funciona. Lo acabo de probar en safari y desde mi móvil y no da problemas. Tiene que ser un problema de configuración de Chrome. Muchas gracias por vuestro tiempo y ayuda!!
    – MariaJo
    el 12 mar. 2019 a las 11:40
  • 1
    Lo unico, no se si hara que funcione en ese caso o no, pero hara el script más optimizado. Saca la declaración del FileReader y la asignación del evento fuera del bucle. No es necesario crear nuevos FileReaders el 12 mar. 2019 a las 11:45

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.