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