Discussion :

[LO88ra]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 
	}
 
}

[Invité]

Bonjour,

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

2-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

3-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

				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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

4-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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" ?

[Invité]

Bonjour,

Avec cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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