Discussion :

[momjunior]

Bonjour

J'utilise le code suivant pour obtenir la taille des fichiers à partir de mon foumulaire:

Code :

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

1
2
3
4
5
 $("input[type='file']").each(function(index,inputFile) {
      formData.append(inputFile.name, inputFile.files[0]);
 console.log("le nom est :"+inputFile.name);
      console.log("la taille est :"+inputFile.size);
   });

Sauf que quelque soit la taille du fichier, j'obtiens le message suivant:

la taille est :20

Et lorsque je fais ceci:

Code :

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

console.log("la taille est :"+inputFile.files[0].size);

J'obtiens le message d'erreur suivant:

Uncaught TypeError: Cannot read property 'size' of undefined

Comment faire pour avoir la taille du fichier?

Merci

[Toufik83]

Salut,

Code html :

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

1
2
3
 
<input type="file" />
<button>Get File infos</button>

Code jQuery :

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
 
  //avec change
  $('[type="file"]').change(function(inputFile){
	if(this.files[0]||inputFile.currentTarget.files[0]){
	  console.log("this.files[0].size :",this.files[0].size
		," this.files[0].name",this.files[0].name
		,", $(this).get(0).files[0].size :",$(this).get(0).files[0].size
		,", $(this).get(0).files[0].name :",$(this).get(0).files[0].name
		," inputFile.currentTarget.files[0].size :"+inputFile.currentTarget.files[0].size
		," inputFile.currentTarget.files[0].name :",inputFile.currentTarget.files[0].name);
	}
	  else{console.log('aucun fichier choisi');}
  });
 
  //avec click sur le bouton
  $('button').click(function(){
   $("[type='file']").each(function(index,inputFile) {
	  if(inputFile.files[0]){
		console.log('inputFile.size :',inputFile.files[0].size
		," inputFile.name :",inputFile.files[0].name
		," $(inputFile).get(0).files[0].size :",$(inputFile).get(0).files[0].size
		," $(inputFile).get(0).files[0].name :",$(inputFile).get(0).files[0].name);
	  }
	  else {
		console.log("Aucun fichier choisi");
	  }
   });

[momjunior]

Ok merci beaucoup, ça marche.

Mais si je ne veux pas utiliser la boucle each, c'est-à-dire faire ceci:

Code :

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

1
2
3
4
 
<input type="file" class="custom-file-input" id="monFichier" name="fichier">
 
alert ($('#monFichier).get(0).files.size);

J'ai le message suivant au niveau de la console:

undefined

[Toufik83]

Code js :

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

$("#monFichier").get(0).files[0].size

[momjunior]

Ok je vois, merci ça marche. Sauf que quand j'essaie de combiner avec le 1er code que tu m'as donné, ça ne marche pas. Je voudrais, en effet, afficher un message d'erreur lorsque le champ file est vide:

Code :

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

1
2
3
4
5
6
7
 
if($("#monFichier").files[0]){
	console.log($("#monFichier").get(0).files[0].size);
  }
  else {
	console.log("Aucun fichier choisi");
  }

Sauf que j'ai le message d'erreur suivant:

TypeError: $(...).files is undefined

[Toufik83]

Code :

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

if($("#monFichier").get(0).files[0]){...}

[momjunior]

Ça marche, merci beaucoup.

[momjunior]

Une dernière chose, je n'arrive plus à ajouter mon fichier dans le Formdata:

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
 
var fich = $("#monFichier").get(0).files[0];
if(fich)
{
    var a = fich.size;
    if (a > 2097152)
    {
        console.log("Désolé, Le fichier dépasse 2 Mo");
    }
    else
    {
        formData.append(fich.name, fich);
    }
 
  }

Tous les fichiers que j'ajoute sont considérés comme vides.

Avant je faisais ceci:

Code :

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

1
2
3
4
5
 
$("input[type='file']").each(function(index,inputFile) {
     formData.append(inputFile.name, inputFile.files[0]);
     console.log("les nom du fichier est :"+inputFile.name);
  });

[Toufik83]

tu veux envoyer le/les fichier(s) vers un script php en passant par $.ajax ?

[momjunior]

Je voudrais envoyer le fichier vers une servlet, voici ce que je faisais:

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
 
$(function() {
 
//Current request reference; can be used else where
var request;
 
/* attach a submit handler to the form */
$(".btn_valider").click(function(event) {
    // abort any pending request
    if (request) {
        request.abort();
    }
  /* stop form from submitting normally */
  event.preventDefault();
 
  /*clear result div*/
   $("#result").html('');
 
   var formData = new FormData();
 
var annee = $('#form1 input[name="annee"]').val();
var mois = $('#form1 select[name="mois"]').val();
 
formData.append('annee', annee);
formData.append('mois', mois);
 
$("input[type='file']").each(function(index,inputFile) {
     formData.append(inputFile.name, inputFile.files[0]);
     console.log("les nom du fichier est :"+inputFile.name);// exemple pour un champ monofichier, sinon il faut parcourir le tableau et créer un tableau avec chaque fichier dedans
  });
  */
 
  }
 
/* Send the data using post and put the results in a div */
  request =$.ajax({
      url: "ajoutJournal",
      type: "POST",
      enctype: 'multipart/form-data',
      data:  formData,
      processData: false,
      contentType: false,
      cache: false,
....

J'ai 2 champs de texte un champ file. Je voudrais modifier mon code dans le but de vérifier la taille du fichier avant de l'ajouter dans formdata. Donc si la taille dépasse 2Mo, alors on n'ajoute pas le fichier.

[Toufik83]

Code js :

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
 
$("[type='file']")
  .each(function(index, file) {
    if (file.files[0]) {
      fich=file.files[0];
      if (fich.size < 2097152) 
         formData.append("fichier_" +index, fich);
      else 
        console.log("le fichier "+ fich.name 
        + ', dépasse 2Mo, size :' 
        + fich.size);
    }
});
// Affichage du contenu de formData (paires clefs/valeurs)
for (var pair of formData.entries()) {
  console.log("nom entrée :"+pair[0] + ', size fichier :' + pair[1].size + ', nom fichier :' + pair[1].name);
}

[momjunior]

Il y a un problème avec cette syntaxe:

Code :

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

1
2
3
4
5
6
7
8
if(inputFile.files[0])
{
 ...
}
else
{
 console.log("Aucun fichier choisi");
}

Elle exécute d'abord les instructions contenues dans else {} et ensuite celles contenues dans le if {}.

Par exemple pour ce code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$("[type='file']").each(function(index,inputFile) {
	  if(inputFile.files[0]){
		console.log('inputFile.size :',inputFile.files[0].size
		," inputFile.name :",inputFile.files[0].name
		," $(inputFile).get(0).files[0].size :",$(inputFile).get(0).files[0].size
		," $(inputFile).get(0).files[0].name :",$(inputFile).get(0).files[0].name);
	  }
	  else {
		console.log("Aucun fichier choisi");
	  }
 });

J'ai ceci dans la console:

Aucun fichier choisi
inputFile.size : 42912 inputFile.name : Ancienneté.pdf $(inputFile).get(0).files[0].size : 42912 $(inputFile).get(0).files[0].name : Ancienneté.pdf

2e exemple, pour ce 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
 
$("[type='file']").each(function(index, file) {
    if (file.files[0]) {
     var fich=file.files[0];
      if (fich.size < 2097152) 
         formData.append("fichier_" +index, fich);
      else 
        console.log("le fichier "+ fich.name 
        + ', dépasse 2Mo, size :' 
        + fich.size);
    }
    else
    {
        console.log("Aucun fichier choisi");
    }
});
// Affichage du contenu de formData (paires clefs/valeurs)
for (var pair of formData.entries()) {
  console.log("nom entrée :"+pair[0] + ', size fichier :' + pair[1].size + ', nom fichier :' + pair[1].name);
}

Aucun fichier choisi
nom entrée :annee, size fichier :undefined, nom fichier :undefined
nom entrée :mois, size fichier :undefined, nom fichier :undefined
nom entrée :fichier_1, size fichier :42912, nom fichier :Ancienneté.pdf

[Toufik83]

il faut que le code soit à l'intérieur d'une fonction clic, sinon il s’exécute au chargement de la page et passe directement a la condition else vu que les inputs file sont vides au départ.
Dans cet exemple j'ai mis un bouton ayant id="infos" <button id="infos">Get Infos</button>.

Code html :

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

1
2
 
<button id="infos">Get Infos</button>

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
 
$(document).ready(function() {
  var formData = new FormData(),fich;
  //clic sur le bouton #infos pour récupérer les valeurs stockés dans formData
  $("#infos").click(function() {
     formData.append('annee', 2019);
     formData.append('mois', 'février');
     $("[type='file']").each(function(index, file) {
      if (file.files[0]) {
        fich = file.files[0];
        if (fich.size < 2097152)
          formData.append("fichier_" + index, fich);
        else
          console.log("le fichier " + fich.name +
            ', dépasse 2Mo, size :' +
            fich.size);
      } else {
        console.log("Aucun fichier choisi");
      }
    });
    // Affichage du contenu de formData (paires clefs/valeurs)
    for (var pair of formData.entries()) {
      if (pair[1].name) {
        console.log('nom entrée :' + pair[0] + ', fichier nom :' + pair[1].name + ", fichier size :" + pair[1].size);
      } else {
        console.log("nom entrée :" + pair[0] +
          ", valeur :" + pair[1]);
      }
    }
  });
});

[momjunior]

Merci beaucoup, ça marche