Inaction de .onprogress sur une progressbar

**setni** · 18/08/2015, 20h35

Bonjour,

J'ai un souci avec une progress barre. Lorsque j'upload un fichier, la seul valeur qui se met à jour sur la barre est 100.
L'upload se réalise correctement sur ma page en ligne mais le .onprogress semble inactif.

J'ai essayé plusieurs combinaison d'ordre et même un setInterval mais rien y fait.

Voici mon 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page de test</title>
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
</head>
 
<body>
 
<div id="barre"></div>
 
    <form enctype="multipart/form-data" method="post" name="fileinfo">
        <input name="file" id="file" type="file"/>
        <input type="submit" value="Stash the file!" />
    </form>
    <div id="output"></div>
</body>
</html>
<script>
 
 
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
 
  var
    oOutput = document.getElementById("output"),
    oData = new FormData(document.forms.namedItem("fileinfo"));
 
 
 
  var oReq = new XMLHttpRequest();
    $('#barre').progressbar({ value: 0 }); // on initialise le plugin
 
 
 
  oReq.open("POST", "test_cible.php", true);
 
    oReq.onprogress = function(e){
	   var loaded = Math.round((e.loaded / e.total) * 100); // on calcul le pourcentage de progression
	   $('#barre').progressbar('value', loaded);
    };
 
  oReq.onload = function(oEvent) {
      $('#barre').progressbar('value', 100);
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
    }
  };
 
  oReq.send(oData);
  ev.preventDefault();
}, false);
 
</script>

Le php est le suivant : très rudimentaire pour le test

Code :

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

move_uploaded_file($_FILES['file']['tmp_name'],'test') or die('erreur fichier');

Je suis sur d'avoir zappé qqch mais je ne sais pas quoi

Merci d'avance

**danielhagnoul** · 18/08/2015, 23h26

Documentation : https://developer.mozilla.org/fr/doc...XMLHttpRequest

Note: Les évènements de progression ne sont pas disponibles sur le protocole file

**ABCIWEB** · 19/08/2015, 01h11

Au passage cette classe javascript qui utilise jquery/html5 te permettras cela et bien d'autres choses (sans besoin de télécharger les lib UI). Elle est fournie dans un dossier pré configuré avec des exemples prêts à l'emploi avec php côté serveur.

**ABCIWEB** · 20/08/2015, 17h23

... ce qui est intéressant, c'est que toutes les options possibles pour suivre le téléchargement d'un fichier sont disponibles : progression graphique, progression textuelle, pourcentage effectué, temps restant estimé, prévisualisation des vignettes pour les fichiers images, etc. et l'on peut choisir d'afficher les options que l'on veut simplement en modifiant son code html.

Des styles css évènementiels et des fonctions javascript évènementielles sont également disponibles pour personnaliser et dynamiser l'affichage, principe de fonctionnement ici.

De plus elle permet de télécharger aussi bien les petits fichiers que les gros ou les très gros quelque soit la configuration du serveur. Les gros fichiers disposent d'une sauvegarde automatique qui permet de reprendre un téléchargement interrompu (volontairement ou non) en utilisant la partie sauvegardée.

Pour finir, elle est fournie dans un dossier de test prêt à l'emploi avec une classe php côté serveur. Plusieurs exemples fonctionnels sont disponibles dont un finalisé et customisé (drag and drop supporté).

--- Fin de pub

**ABCIWEB** · 27/09/2015, 22h38

Salut,

J'ajoute, puisque tu avais abordé le sujet par MP, que la classe d'upload vient d'être mise à jour et dispose maintenant de deux exemples de scripts fonctionnels avec un module de crop installé. Les crop peuvent être multiples et un champ "légende" pour chaque image a été intégré pour exemple

La sélection du recadrage se fait côté client, et le travail de recadrage se fait côté serveur pour une meilleure qualité et être compatible avec des navigateurs disposant de peu de ressources (testé fonctionnel sur smartphone entrée de gamme)

Evidemment la progress barre est de la partie durant le téléchargement, et on pourrait aussi facilement faire afficher le temps restant si nécessaire.

Inaction de .onprogress sur une progressbar

jQuery

Discussions similaires

Partager

Partager