Bonjour à tous
Voilà, j'ai un problème avec un script de barre de progression.
J'explique un peu ce que j'essai de faire:
J'ai fait un script en php pour télécharger des fichiers sur un FTP
Je souhaite pendant le téléchargement une barre de progression, pour savoir ou en est le téléchargement
le coté php est fait et opérationnelle, je récupère meme le % de la progressiondedant.
J'ai tenté diverse méthodes mais sans succès
Je me suis penché sur l'ajax mais pff je comprends pas grand chose (a cause de la fatigue je pense)
je me suis fait une petite page de teste beta.php, que voici
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76 <?php $action = @$_GET['a']; if($action == 'dl') { $file_size = 153600; echo "<ul>"; for($i=0; $i<$file_size;$i++) { echo "<li>loaded=\"".(($i * 100) / $file_size)."\"</li>"; } echo "</ul>"; } else { ?><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Language" content="fr" /> <!--CSS--> <!--link rel="stylesheet" type="text/css" href="./css/portfolio_tk.css" /> <!--Javascript--> <script src="scripts/jquery-3.2.1.js" type="text/javascript"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="scripts/jquery-ui.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script language='text/javascript'> var inputElement = $('#file'); inputElement.change(function(){ var files = inputElement.attr('files'); var file = files[0]; var xhr = new XMLHttpRequest(); $('#barre').progressbar({ value: 0 }); // on initialise le plugin xhr.open('GET', 'beta.php?a=dl'); xhr.onprogress = function(e){ var loaded = Math.round(e.loaded); // on calcul le pourcentage de progression $('#barre').progressbar('value', loaded); } xhr.onload = function(){ $('#barre').progressbar('value', 100); } var form = new FormData(); form.append('file', inputElement.file); xhr.send(form); }); </script> </head> <body> <table width="100%" border="0"> <tr> <th>TITLE</th> </tr> <tr> <td> <div id="barre"></div> </td> </tr> </table> </body> </html><?php } ?>
comme vous pouvez le voir, j'ai simulé un télechargement avec un
ca me rempli ça au format HTML comme j'ai pu le voir sur le cours de ce site
Code : Sélectionner tout - Visualiser dans une fenêtre à part for($i=0; $i<$file_size;$i++) // $file_size = 150Mo
donc je renvois loaded="%deprogression"
ensuite le code AJAX devrait aller chercher beta.php?a=dl pour prendre e.loaded
j'ai bien déclaré jquery
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 <script src="scripts/jquery-3.2.1.js" type="text/javascript"></script> <script src="scripts/jquery-ui.js"></script>
mais aucun résultat.
Pouvez vous m'aider ?
Merci d'avance
Emmanuel
Partager