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
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 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