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