Affichage barre de progression
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:
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
Code:
for($i=0; $i<$file_size;$i++) // $file_size = 150Mo
ca me rempli ça au format HTML comme j'ai pu le voir sur le cours de ce site
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:
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
