Créer une progress bar

Version imprimable

Bonjour à tous,
Ce matin je cherche à scripter une progress bar, artifice un peu inutile mais que mon client veux à tout prix, et je patauge notamment dans l'évaluation du poids total du fichier.
J'ai fouillé sur le Web et j'ai adapté ceci qui ne fonctionne pas ! le « evt.loaded » s'affiche correctement mais pas « evt.total »

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
 
        $.ajax({
          xhr: function()
          {
            var xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", function(evt){
              console.log("upload percentComplete : "+evt.loaded+" / "+evt.total+"\nEvent : "+evt.length+"\nratio  : "+Math.round(evt.loaded/evt.total * 100)+" %");
              if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress
                console.log("upload percentComplete : "+evt.loaded+" / "+evt.total+"\nEvent : "+evt.length+"\nratio  : "+Math.round(evt.loaded/evt.total * 100)+" %");
              }
            }, false);
            //Download progress
            xhr.addEventListener("progress", function(evt){
                console.log("percentComplete : "+evt.loaded+" / "+evt.total+"\nEvent : "+evt.length+"\nratio  : "+Math.round(evt.loaded/evt.total * 100)+" %");
              if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with download progress
                console.log("percentComplete : "+percentComplete);
              }
            }, false);
            return xhr;
          },
          type: 'POST',
          url: url,
          data: {},
          success: function(data){
            //Do something
          }
        });

Si qu'un peut m'éclairer d'avance merci

13/03/2018, 15h00
psychadelic

une simple recherche m'a donné ça : http://jsfiddle.net/GvdSy/ mais bon, c'est du jQuery 2

ou ça : https://codepen.io/alexgill/pen/XdGjGd en jQuery 1.8....

Sinon, je m'attendais logiquement à trouver quelque part --> contentType: ' multipart/form-data'

comme indiqué ici ==> http://christopher5106.github.io/web...gress-bar.html

et il y un "sujet" ici qui me semble très très très proche : https://www.developpez.net/forums/d1...agments-chunk/
et qui si j'ai bien compris l'idée utilise le serveur PHP pour faire transiter l'upload morceau par morceaux
13/03/2018, 17h38
bronon

Merci pour ton retour, je regarde ceci ce soir.
Cordialement
14/03/2018, 04h34
ABCIWEB

Aussi il existe cette classe d'upload ajax qui utilise jQuery et implémente cette fonctionnalité, ainsi que le temps restant et beaucoup d'autres informations en options. Permet également une reprise de téléchargement pour les gros fichiers. Elle est fournie avec des fichiers d'exemples prêt à l'emploi avec php côté serveur.