Limite nombre de fichier input file

30 mars 2020 à 14:01:57

hello a tous je cherche a faire un petit script javascript permettant de limité le nombre de fichier dans un input html5

le contexte :

il peut y avoir X champs input ayant des limitations différentes (les id et les name sont libres)

j'ai commencer a travailler sur un js que j'ai trouver et dont j'essai de m'inspiré ...

l'idée c'est d'avoir un attribut maxuploads="X" qui permette de mettre une limite distincte par champ

html

<input type="file" name="micker[file_upload0][]" accept=".pdf" id="fileupload0" placeholder="Upload field2 mulitple" aria-label="Upload field2 mulitple" class="inputfile required invalid" multiple="" style="margin:0" maxuploads="2" aria-required="true" required="required" aria-invalid="true">
<input type="file" name="micker[monchamp14][]" accept=".pdf" id="monchamp14" placeholder="Chargement fichier" aria-label="Upload field2 mulitple" class="inputfile required invalid" multiple="" style="margin:0" maxuploads="10" aria-required="true" required="required" aria-invalid="true">

le js

jQuery(document).ready(function ($) {
var number_of_uploads;
$(".inputfile").change(function () {
   if (number_of_uploads > $(this).attr(maxuploads)) {
       alert('Your Message');
   }
   else {
       number_of_uploads = number_of_uploads + 1;
   }
});
});

Mais je n'y arrive pas ....

des idées ?

Merci

Lartak

30 mars 2020 à 14:43:19

Bonjour.

La valeur de l'attribut maxuploads (qui n'existe pas par ailleurs, si tu veux faire un attribut html personnalisé, il te faut par exemple utiliser le préfixe d'attribut data-), est une chaîne de caractères, tu ne peux donc pas faire une comparaison numérique sur celle-ci sans lui modifier son format pour la comparaison.

De plus que tu ne semble pas savoir comment utiliser la méthode attr de jQuery.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

micker

30 mars 2020 à 14:56:00

hello déjà super une réponse ... oui je suis plus un bidouilleur et le js pour moi c'est vraiement le début je galere pas mal ....

donc dans mon input

<input type="file" name="micker[file_upload0][]" accept=".pdf" id="fileupload0" placeholder="Upload field2 mulitple" aria-label="Upload field2 mulitple" class="inputfile required invalid" multiple="" style="margin:0" data-maxuploads="2" aria-required="true" required="required" aria-invalid="true">
<input type="file" name="micker[monchamp14][]" accept=".pdf" id="monchamp14" placeholder="Chargement fichier" aria-label="Upload field2 mulitple" class="inputfile required invalid" multiple="" style="margin:0" data-maxuploads="10" aria-required="true" required="required" aria-invalid="true">

c'est mieux ?

apres le coup du nombre j'avoue là je suis perdu tu peus m'en dire plus ?

Merci

Lartak

30 mars 2020 à 15:01:27

Pour faire simple, c'est comme si tu demandais si 3 est supérieur à "2", ça ne peut pas fonctionner.

Il te faut donc changer le format de la valeur de l'attribut data-maxuploads pour quelle soit de type numérique/number et non une simple chaîne de caractères.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

micker

30 mars 2020 à 15:30:20

alors j'essai de mieu comprendre le code et sa logique ...

jQuery(document).ready(function ($) {
			$("body").change(function () {
                var numFiles = $("input",this)[0].files.length;
                var maxuploads = $("input",this)[0].attr(\'data-maxuploads\').toString();
                alert(numFiles);
                if (numFiles > maxuploads ) {
                    alert(\'Your Message\');
                    }else {
                    maxuploads = maxuploads + 1;
                        }
                    });
            }); 
			});

je n'arrive pas a bien comprendre le

j'ai cette erreur

Uncaught TypeError: Cannot read property 'length' of undefined

....

-
Edité par micker 30 mars 2020 à 15:48:25

Lartak

31 mars 2020 à 20:03:02

Qu'est-ce que c'est que cette utilisation de sélecteur d'éléments via jQuery ?

$("input",this) // ???

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

AliasDmc

1 avril 2020 à 11:59:59

Bonjour micker

C'est cela que tu cherches ?

https://codepen.io/Zonecss/pen/mdyoOeM

Découvrez les Css avec la zonecss.fr