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)

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.

**thelvin** · 15/06/2017, 14h50

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

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.

**orphen** · 15/06/2017, 15h48

Code html :

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

**diane621** · 15/06/2017, 19h54

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.

**orphen** · 16/06/2017, 10h11

Dans le Onclick

tu peux imaginer stoquer le nom du fichierdans une variable.

Code :

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

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

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

Code :

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

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

Je te laisse regarder.

Test existence fichier input file

JavaScript

Discussions similaires

Partager

Partager