Discussion :

[cris84]

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 :

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

[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 SQL :

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

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

[cris84]

Bonsoir,

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

Code :

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

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 ? c'est là que j'aimerai qu'il s'affiche :

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

[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

[Watilin]

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 PHP :

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

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 JS :

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

[cris84]

Oui je comprends mieux cette solution...
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 :

[Watilin]

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.