Discussion :

[klose2012]

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 :

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
 
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("");
});

[FazioNico]

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 :

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

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 :

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

reader.readAsDataURL()

perso je testerai avec un truc du genres:

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
 
// 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 ;-)