Affichage max de 5 photos (JS)

Bonjour à tous,

J'ai trouvé ce code qui sert à uploader plusieurs photos et de les afficher, je souhaite maintenant que l'utilisateur n'ait la possibilité d'uploader que 5 photos. Pourriez-vous m'aider pour intégrer une fonction (while) qui sert à maximiser le nombre d'upload des photos en 5 ?

Merci de votre aide.

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

function handleFileSelect(event) { console.log(event) var input = this;   if (input.files && input.files[0]) { var reader = new FileReader(); console.log(reader) reader.onload = (function (e) { var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="',e.target.result, '" title="', escape(e.name), '"/><span class="remove_img_preview"></span>'].join(''); document.getElementById('preview').insertBefore(span, null); }); reader.readAsDataURL(input.files[0]);   } }   $('#files').change(handleFileSelect);   $('#preview').on('click', '.remove_img_preview',function () { $(this).parent('span').remove(); $(this).val(""); });

---

Hello, je vais essayer de t'aider.
Le plus simple est de checker si la taille du tableau est plus petite ou égale à 4 (oui on compte les tableau depuis 0).
Tu rajoute au test la condition:

Code:

---

input.files.length < 4

---

et tu peu mettre un else à la fin de ton if pour afficher un message d'erreur.
Faudra aussi revoir comment tu gère cette partie:

Code:

---

reader.readAsDataURL()

---

perso je testerai avec un truc du genres:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// load files input const loadAllFile = Promise.all([...input.files].map(file => { var reader = new FileReader(); reader.readAsDataURL(file); return new Promise((resolve, reject) => { reader.onload = ( (e) => resolve(e)); }); })]; // display result loadAllFile.then(result => { // ici tu fait le traitement d'affichage. Tu as sous form de tableau la liste de tous les fichier "load" var span = document.createElement('span'); // etc... }).catch(err => console.log(err));

---

J'ai pas test ni vérifié la syntaxe mais cela te mes sur une bonne piste ;-)