Limiter le nombre d'upload d'images une fois chargées

Version imprimable

Bonjour à tous,
je voudrais savoir comment on peut limiter le nombre d'images une fois chargées. je ne veux pas limiter le nombre d'images à charger en même temps défini avec files.length >3 par exemple.
Une fois les images chargées et affichées, je voudrais afficher un message "pas plus de 3 images" et que l'utilisateur ne puisse plus charger d'autres images.

J'ai 2 fichiers : 1 html contenant le formulaire et 1 PHP pour traiter l'insertion en base sql via POST

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
$('#multiple_files').change(function(){
  var error_images = '';
  var form_data = new FormData();
  var files = $('#multiple_files')[0].files;
 
  for(var i=0; i<files.length; i++)
   {
 
    var name = document.getElementById("multiple_files").files[i].name;
    var ext = name.split('.').pop().toLowerCase();
    if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1) 
    {
     error_images += '<p>Fichier invalide !</p>';
    }
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("multiple_files").files[i]);
    var f = document.getElementById("multiple_files").files[i];
    var fsize = f.size||f.fileSize;
    if(fsize > 200000)
    {
     error_images += '<p>L\'image est trop grosse</p>';
    }
    else
    {
     form_data.append("file[]", document.getElementById('multiple_files').files[i]);
    }
 
	}
 
	if(files.length > 3)
  {
   error_images += 'Vous ne pouvez pas t&eacute;l&eacute;charger plus de 3 images';
  }
 
 
  if(error_images == '')
  {
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
 
    beforeSend:function(){
     $('#error_multiple_files').html('<br /><label class="text-primary"><i class="fa fa-cog fa-spin fa-fw"></i> T&eacute;l&eacute;chargement en cours...</label>');
 
    }, 
 
    success:function(data)
    {
     $('#error_multiple_files').html('<br /><label class="text-success"><i class="fa fa-check" aria-hidden="true"></i> T&eacute;l&eacute;chargement termin&eacute;</label>');
     load_image_data();
    }
 
   });
 
  }
  else
  {
   $('#multiple_files').val('');
   $('#error_multiple_files').html("<span class='text-danger'>"+error_images+"</span>");
   return false;
  }
 });

Merci de vos idées :)

19/12/2018, 22h31
Watilin
Bonsoir,
contrôler le nombre et le type des fichiers côté client c’est une bonne chose pour l’ergonomie, mais il y a un principe de sécurité dans le développement Web : ne jamais faire confiance à ce qui vient du client. Donc tu dois également faire ces contrôles côté serveur.

Pour ça, il faut que ton script upload.php vérifie que l’utilisateur ou l’utilisatrice n’a pas déjà trois images stockées dans la base de données. Ou plus exactement, 3 - n, n étant le nombre d’images envoyées avec la requête ajax.

La requête pourrait par exemple utiliser la fonction COUNT couplée à une clause GROUP BY :
Code:

1 2 3 SELECT COUNT(*) FROM uploads WHERE user = ? GROUP BY user;

Bonsoir,

j'ai donc fait ma requête dans mon fichier PHP (fichier upload.php)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
//requête PDO
 
if($nb_of_rows <= 3)
 { 
// je poursuis le téléchargement des autres images
}
else
{
//j'affiche le message
 
$error="pas plus de 3 images";
 
}

La question c'est comment afficher ce message dans l'autre page qui contient le html et javascript ?:roll: c'est là que j'aimerai qu'il s'affiche :

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
if(error_images == '')
  {
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
 
    beforeSend:function(){
     $('#error_multiple_files').html('<br /><label class="text-primary"><i class="fa fa-cog fa-spin fa-fw"></i> T&eacute;l&eacute;chargement en cours...</label>');
 
    }, 
	 success:function(data)
    {
     $('#error_multiple_files').html('<br /><label class="text-success"><i class="fa fa-check" aria-hidden="true"></i> T&eacute;l&eacute;chargement termin&eacute;</label>');
     load_image_data();
    },
 
// ICI le message d'erreur	
	   });
 
  }

21/12/2018, 15h50
NoSmoking

Bonjour,
c'est dans la partie success:function(data) qu'il te faut gérer cela en testant ce que te retourne le serveur, un statut par exemple

Il faut commencer par renvoyer le message de succès ou d’erreur au client. Par exemple, si tu as choisi de répondre en format JSON :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
header('Content-Type: application/json');
 
...
 
 
if (!empty($error)) {
    echo json_encode([ 'success' => false, 'error' => $error ]);
}
else {
    echo json_encode([ 'success' => true ]);
}

Et après tu récupères ce message dans le script client :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    success: function (data)
    {
      if (data.success) {
        $('#error_multiple_files').empty().append(
          $('<br />'),
          $('<label>').attr('class', 'text-success').text('Téléchargement terminé').prepend(
            $('<i>').attr({ 'class': 'fa fa-check', 'aria-hidden': true })
          )
        );
        load_image_data();
      }
      else {
        $('#multiple_files').val('');
        $('#error_multiple_files').empty().append(
          $('<span>').attr('class', 'text-danger').text(data.error)
        );
      }
    }

Note, j’en profite pour te montrer une façon alternative de construire des fragments HTML qui n’utilise pas .html(), car dans mon opinion ça rend le code plus clair. À toi de voir si tu adoptes cette façon de faire ou pas.

21/12/2018, 17h57
cris84

Oui je comprends mieux cette solution...:D
J'ai codé en utf8 afin de récupérer le jeu de caractère mais je vais le passer en .html() pour être uniforme dans mon code.

Merci de m'avoir orienté et j'espère que ça servira à d'autres

Joyeux noël avec un peu d'avance :merci::
21/12/2018, 18h39
Watilin

Citation:

Envoyé par cris84

J'ai codé en utf8 afin de récupérer le jeu de caractère mais je vais le passer en .html() pour être uniforme dans mon code.

Je ne comprends pas cette phrase. utf8 est un charset, pas un langage. Et qu’on soit bien clair à propos de la méthode .html(), je la déconseille au même titre que la propriété innerHTML en JavaScript vanilla.
21/12/2018, 19h08
cris84

Oui pardon, c'était pour les accents que j'ai ajouté utf8_encode dans le PHP
Ok pour le .html(), je vais modifier

Merci pour votre aide et pour les Cours JavaScript :ave: