11521 sujets

JavaScript, DOM et API Web HTML5

Limiter le nombre de sélection de l’Input File

Bonjour,
J’aimerais limiter le nombre de sélections de l’Input File à 2 éléments.
Si l’utilisateur ajoute plus d’élément je voudrais crée une alerte pour dire que le nombre d’ajout maximum est de 2. Sans devoir utilisé un deuxième boutons Submit.

J'ai utilisé ce code (http://jsfiddle.net/Curt/u4NuH/ ) qui utilise un bouton submit.

Pourquoi sur mon code l’alerte ne fonctionne immédiatement après l'ajout de plus de 2 fichiers. 


<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Limiter ajout input file</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
 
 <input id="monfichier" type="file" name="file" multiple >
 
 <script>
	document.getElementById('monfichier').onclick = function() {
      if (parseInt($fileUpload.get(0).files.length) > 2){
         alert(" 2 fichiers maximum !");
        }
	};

 </script>
</body>
</html>


Merci de votre aide.
Modifié par dop10 (29 Jan 2018 - 22:02)
Bonjour,

Oui le problème c'est dans levenement click je pense
Le souci c'est que lorsque je upload plus de 5 fichiers l'alerte n'apparaît pas.
Mais quand je re-click sur select fichier l'alerte apparait. Smiley confus

Voici mon script :

https://jsfiddle.net/g9cn4qvw/
Modifié par dop10 (30 Jan 2018 - 11:16)
Modérateur
dop10 a écrit :
Bonjour,

Oui le problème c'est dans levenement click je pense
Le souci c'est que lorsque je upload plus de 5 fichiers l'alerte n'apparaît pas.
Mais quand je re-click sur select fichier l'alerte apparait. Smiley confus

Voici mon script :

https://jsfiddle.net/g9cn4qvw/


On va éviter de tourner autour du pot. N'est ce pas "change" ce que tu cherches à faire ? Smiley cligne
Modifié par niuxe (30 Jan 2018 - 12:38)
dop10 a écrit :
Bonjour,

Oui le problème c'est dans levenement click je pense
Le souci c'est que lorsque je upload plus de 5 fichiers l'alerte n'apparaît pas.
Mais quand je re-click sur select fichier l'alerte apparait. Smiley confus

Voici mon script :

https://jsfiddle.net/g9cn4qvw/


Je répond juste au faux-problème du "pourquoi" l'alerte apparait au click ? parce que c'est ce qui est codé :

$("#theFiles2").click(function()

l'alerte est dans, à l'intérieur ,de l'événement click. Donc l'alerte apparaît quand tu click. logique...
au fait, comment peux tu envoyer plusieurs fichiers avec name="file"
n'est on pas obligé de mettre name="file[]" dans ce cas?
Modifié par lionel_css3 (30 Jan 2018 - 21:25)
Modérateur
lionel_css3 a écrit :
au fait, comment peux tu envoyer plusieurs fichiers avec name="file"
n'est on pas obligé de mettre name="file[]" dans ce cas?


+1 exact, mais pour le traiter en php ! Parce qu'il faut de toute manière, traiter les données côté serveur (backend) et dont php traite cela en natif. Dans d'autres langages, les crochets sont inexistants dans les vues.

D'ailleurs, si ce sont des fichiers binaires (il me semble que c'est pour ce type de fichiers uniquement (à vérifier)), quel est l'attribut obligatoire pour l'élément <form> ? "enctype" (attribut permettant d'indiquer comment les données seront encodées lors de la soumission du formulaire) avec comme valeur associée pour ce type de tâche "multipart/form-data" (télécharger des fichiers vers un serveur). 

<form action="chemin/vers/controller" method="post" enctype="multipart/form-data">
    <!-- etc -->
</form>


@Jencal : +1. La sémantique Smiley smile et les étapes/événements successifs que l'on saisie dans un champs (même de type file).
Modifié par niuxe (31 Jan 2018 - 21:27)
Sujet clos
Aller à