Impossible d'obtenir la taille d'un fichier

Version imprimable

Bonjour

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

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:

Citation:

la taille est :20

Et lorsque je fais ceci:

Code:

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

J'obtiens le message d'erreur suivant:

Citation:

Uncaught TypeError: Cannot read property 'size' of undefined

Comment faire pour avoir la taille du fichier?

Merci

Salut,

Code:

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

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
 
  //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");
	  }
   });

08/02/2019, 12h05
momjunior
Ok merci beaucoup, ça marche.

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

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:

Citation:

undefined
08/02/2019, 13h25
Toufik83

Code:

$("#monFichier").get(0).files[0].size
08/02/2019, 21h51
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:

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:

Citation:

TypeError: $(...).files is undefined
08/02/2019, 22h01
Toufik83

Code:

if($("#monFichier").get(0).files[0]){...}
11/02/2019, 09h22
momjunior

Ça marche, merci beaucoup.

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

Code:

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:

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);
  });

11/02/2019, 16h07
Toufik83

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

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

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
 
$(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.

Code:

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);
}

Il y a un problème avec cette syntaxe:
Code:

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:

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:

Citation:

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:

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); }
Citation:

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

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:

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

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
 
$(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]);
      }
    }
  });
});

17/02/2019, 22h35
momjunior

Merci beaucoup, ça marche