Test existence fichier input file

**diane621** · 14/06/2017, 16h49

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 :

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

**mathieu** · 15/06/2017, 00h08

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"

**diane621** · 15/06/2017, 10h11

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 :

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

**mathieu** · 15/06/2017, 11h15

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

Code :

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

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

**diane621** · 15/06/2017, 12h34

Sur la console ça m’indique.

Code :

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

1
2
3
Uncaught TypeError: Cannot read property 'length' of undefined
    at verif_button (formulaire1.html:16)
    at HTMLButtonElement.onclick (formulaire1.html:49)