Test existence fichier input file

Version imprimable

Bonjour,
Je souhaite vérifier si le input file contient un fichier et c’est le cas lorsque l’utilisateur click sur le bouton valider.
Envoyé un message : fichier envoyé
Si non un message : Veuillez upload le fichier.
Mon script ne fonctionne pas. :(
Voici le code :

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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Test existence fichier input file</title>
 
  <script>
	function verif_button() 
	{ 
		if(document.getElementsByClassName("uploadBtn").value != null){	
			//alert("ok");
			$(".send").show();//montrer message 
			//alert("ok");
		}	
		else{
			$(".send").hide();
			$(".send-err").show();
		}
	}  
  </script>
    <style>
   .form{
		border:1px solid black;
		margin-bottom:10px;
   }
 
   .send{
		display:none;
   }
 
   .send-err{
		display:none;
   }
 
  </style>
  </head>
 
<body>
  <div class="form">
  <input class="uploadBtn" type="file" class="upload" required>
  <p class="send">Fichier envoyé </p><br><br>
  <p class="send-err">Veuillez upload le fichier </p><br><br>
  <button type="button" class="btn-modal" onclick="javascript:verif_button();">Valider</button><br><br>
 
  </div>
  <div class="form">
  <input class="uploadBtn" type="file" class="upload" required>
  <p class="send">Fichier envoyé </p><br><br>
  <p class="send-err">Veuillez upload le fichier </p><br><br>
  <button type="button" class="btn-modal" onclick="javascript:verif_button();">Valider</button><br><br>
  </div>
 
 
  <div class="form">
  <input class="uploadBtn" type="file" class="upload" required>
  <p class="send">Fichier envoyé </p><br><br>
  <p class="send-err">Veuillez upload le fichier </p><br><br>
  <button type="button" class="btn-modal" onclick="javascript:verif_button();">Valider</button><br><br>
  </div>
 
 
</body>
</html>

Merci de votre aide

15/06/2017, 00h08
mathieu

la balise "input file" a une propriété "files" qui est un tableau contenant les fichiers sélectionnés
donc vous pouvez tester la valeur de "files.length"

J'ai essayé mais ça ne marche pas.Ça ne rentre pas dans mes conditions IF - ELSE. C'est comme dans la première version.

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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Test existence fichier input file</title>
 
  <script>
	function verif_button() 
	{ 
		if(document.getElementsByClassName("uploadBtn").files.length != 0){	
			//alert("ok");
			$(".send").show();//montrer message 
			//alert("ok");
		}	
		else{
			$(".send").hide();
			$(".send-err").show();
		}
	}  
  </script>
    <style>
   .form{
		border:1px solid black;
		margin-bottom:10px;
   }
 
   .send{
		display:none;
   }
 
   .send-err{
		display:none;
   }
 
  </style>
  </head>
 
<body>
  <div class="form">
  <input class="uploadBtn" type="file" class="upload" required>
  <p class="send">Fichier envoyé </p><br><br>
  <p class="send-err">Veuillez upload le fichier </p><br><br>
  <button type="button" class="btn-modal" onclick="javascript:verif_button();">Valider</button><br><br>
</body>
</html>

y a t il une autre solution ?

il faudrait que vous fassiez le minium de débugage si vous voulez qu'on vous aide:
Code:

1 2 console.log(document.getElementsByClassName("uploadBtn")); console.log(document.getElementsByClassName("uploadBtn").files);

15/06/2017, 12h34
diane621
Sur la console ça m’indique.
Code:

1 2 3 Uncaught TypeError: Cannot read property 'length' of undefined at verif_button (formulaire1.html:16) at HTMLButtonElement.onclick (formulaire1.html:49)
Dans un autre forum j’ai vu que c’est parce que mon script est exécuté avant le chargement du DOM.
Mais je comprends pas ce que cela signifie.
15/06/2017, 14h50
thelvin

Et que dit-elle quand tu fais les console.log() qu'on t'a demandé de faire ?

Citation:

Envoyé par diane621

Dans un autre forum j’ai vu que c’est parce que mon script est exécuté avant le chargement du DOM.

Nope.

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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Test existence fichier input file</title>
 
 
    <style>
   .form{
                border:1px solid black;
                margin-bottom:10px;
   }
 
   .send{
                display:none;
   }
 
   .send-err{
                display:none;
   }
 
  </style>
  </head>
 
<body>
  <div class="form">
  <input class="uploadBtn upload" type="file" required>
  <p class="send">Fichier envoyé </p><br><br>
  <p class="send-err">Veuillez upload le fichier </p><br><br>
  <button type="button" class="btn-modal">Valider</button><br><br>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
    <script>
        $(document).ready(function(){
                $('.btn-modal').on('click', function(){
                        
                        if ($('.uploadBtn').get(0).files.length === 0) {
                                console.log(1);
                                $(".send").hide();
                                $(".send-err").show();
                        }else {
                                console.log(0);
                                $(".send").show();
                        }
                        
                        
                        
                })
        });
  </script>
 
</body>
</html>

Voili voilou je te laisse regarder.
Pour info tu as deux balise class dans ton code html ce qui peu provoquer des erreurs.

Avec $(document).ready(function(){}) tu es sur que ton code qui est exécuter dedans est lancer a partir du moment ou la page est chargée complètement.

Évite les attribut onclick de nos jour nous avons la possibilité de dissocier le html du JS profitons en :).

See you

15/06/2017, 19h54
diane621

Merci orphen.
J’ai utilisé les mêmes class( "send" - "send-err" - "btn-modal") pour pouvoir utiliser le même code sur une autre page.
C’est pour cela que j’ai pas utilisé de ID.
J’ai une autre question est-il possible de vérifier l’extension si c’est un pdf - odt. Et envoyé un message d'erreur.
16/06/2017, 10h11
orphen
Dans le Onclick

tu peux imaginer stoquer le nom du fichierdans une variable.

Code:

var fileName = $('.uploadBtn').get(0).files[0].name

Puis faire une condition avec une regexp et la methode test.
Cela donnerai genre
Code:

1 2 3 if(!/ton expression/.test(fileName)){ // ton code }
Je te laisse regarder.