Previsualiser une image (FileReader)

Version imprimable

Bonjour,

J'essaie de prévisualiser une image en cliquant sur l'image actuelle. Mais j'obtiens "null" dans la source de l'image, par conséquent, l'image ne s'affiche pas.

Est-ce que quelqu'un pourrait m'aider à résoudre ce probleme ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
export default class UploadImg {
	constructor() {
		this.img = document.getElementsByClassName("img"); // images
		this.file = document.getElementsByClassName("upload-file"); // input type file
	}
 
	clickImg() {
		for ( let i = 0 ; i < this.img.length ; i++ ) {
			this.img[i].addEventListener("click", ()=>{
 
				if ($(this.img[i]).attr("data-id") === $(this.file[i]).attr("data-id") ) {
					$(this.file[i]).click(); // ouvre le selecteur 
					$(this.file[i]).on('change', ()=> {
						var reader = new FileReader();
						if ($(this.file[i]).get(0).files[0]) {
							reader.onload =  this.changeImg(i, reader)
						}
					})
				}
			})
		}
	}
 
	changeImg(i, event) {
		this.img[i].src = event.result; // retourne null 
	}
 
}

26/12/2019, 16h40
Invité
Bonjour,

1- Sans un bout de code HTML qui va avec, impossible de tester quoi que ce soit...

2-

Code:

this.img = document.getElementsByClassName("img"); // images

A moins qu'il y ait effectivement une classe "img" sur ces images, si tu veux cibler les balises <img>, c'est :

Code:

this.img = document.getElementsByTagName("img"); // images

3-

Code:

if ($(this.img[i]).attr("data-id") === $(this.file[i]).attr("data-id") ) {

Les attributs data-* se récupèrent avec .dataset (en JavaScript pur) et .data() en jQuery :

Code:

if ($(this.img[i]).data('id') === $(this.file[i]).data('id') ) {

4-
Code:

1 2 3 changeImg(i, event) { this.img[i].src = event.result; // retourne null }
Pas sûr que l'utilisation du mot "event" soit judicieux ici. As-tu testé en remplaçant par "machin" ?
26/12/2019, 17h01
Invité

Bonjour,

Avec cette ligne :

Code:

reader.onload = this.changeImg(i, reader)

tu n'attends pas l'évènement pour exécuter ta fonction, tu l'exécutes tout de suite et donne son retour (undefined) à onload.
Il te faut lui passer une fonction qui exécutera ce code :

Code:

reader.onload = (event) => this.changeImg(i, reader);

Et en effet le nom de ton paramètre event dans la fonction changeImg(i, event) prête à confusion : il s'agit de ton reader.

Mais avec ton code actuel, cet évènement ne surviendra jamais. Il te faut appeler l'une des fonctions readAs* pour lancer la lecture. En l'occurrence ici readAsDataURL() en passant le fichier en paramètre.

Sinon if ($(this.file[i]).get(0).files[0]) s'écrit plus simplement : if (this.file[i].files[0]).