Barre de chargement en javascript

Bonsoir à tous,
Je suis presque nouveau dans le forum et ceci est mon tout premier post.

Voilà, je développe une application en php, et dans cette application j'ai un module qui me permet d'uploader un fichier texte en découpant chaque ligne selon un certain alignement des données. Tout se passe bien jusqu'ici, mais le soucis c'est que il m'arrive d'uploader des fichier ayant parfois 1000 (mille) ligne, et lors du chargement du fichier, l'attente est parfois longue.

Je voudrais donc inséser dans mon code un script que j'ai trouver sur internet et qui me propose une barre de progression circulaire http://codepen.io/anon/pen/rOGbJr.
Je voudrais que lorsque je clique sur le bouton "charger" que la barre se mette en mouvement pendant le temps que mon fichier est en cours de téléchargement.

Je compte vivement sur votre aide pour pouvoir résoudre cette énigme. Cordialement

Voici le code PHP qui contient la requète d'upload de fichier:

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<?php 
require_once('connexion_bd.php');
require_once('session-verif.php');
?>
 
<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content=""> 
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, minimumscale=0.25, maximumscale=1 , userscalable=no , targetdensitydpi=device-dpi "/>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-5589-1" />
 
 
 
    <link rel="stylesheet" href="modalbox.css" type="text/css" media="screen, projection" />
    <script type="text/javascript" src="lib/prototype.js"></script>
    <script type="text/javascript" src="lib/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="modalbox.js"></script>
 
    <title>Initialiser DIPE</title>
 
    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- MetisMenu CSS -->
    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
 
    <!-- Timeline CSS -->
    <link href="../dist/css/timeline.css" rel="stylesheet"> 
 
    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">
 
    <!-- Morris Charts CSS -->
    <link href="../bower_components/morrisjs/morris.css" rel="stylesheet">
 
    <!-- Custom Fonts -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css_perso.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="style.css" />
 
 
 
</head>
 
<body>
 
    <div id="wrapper">
 
        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php"><img height="30" width="235" src="../img/img_aprad.gif"></a><br/>
 
            </div>
            <!-- /.navbar-header -->
 
            <ul class="nav navbar-top-links navbar-right">
 
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i> <?php echo 'Bonjour <strong>'.$login.'</strong>' ;?> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i>Profil</a>
                        </li>
                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="../index.php"><i class="fa fa-sign-out fa-fw"></i> Deconnexion</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
 
 
 
 
             <!-- /.navbar-top-links -->
            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">  
                        <li>
                            <a href="index.php" title="Accueil"><i class="fa fa-dashboard fa-fw"></i> Accueil <span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                 <li>
                                     <a href="initialiser_dipe.php" title="Initialiser un DIPE">Initialiser un DIPE</a>
                                 </li>
                                  <li>
                                     <a href="dupliquer_dipe.php" title="Initialiser un DIPE">Dupliquer un DIPE</a>
                                 </li>
                                 <li>
                                    <a href="liste_des_dipes.php" title="Voir tous les DIPE">Historique</a>
                                </li>
                                <li>
                                    <a href="modification_mois1.php" title="Mettre à jour un DIPE">Actualiser un DIPE </a>
                                </li>
                                <li>
                                    <a href="generer_dipe.php" title="Generer un DIPE">Generer un DIPE</a>
                                </li>
                                <li>    
                                    <a href="ajout_employer.php" title="Ajouter un salarié">Ajouter un salarié</a>
                                </li>
                                <li>
                                    <a href="liste_employes.php" title="Voir tous les salariés">Voir tous les salari&eacute;s</a>
                                </li>
 
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
 
 
        </nav>
 
 
             <!-- CORPS DE LA PAGE -->
        <div id="page-wrapper" > 
 
        <br/><br/> <div align="center" style="color:blue"><h1>Initialiser un DIPE</h1></div>   <br/><br/>
 
        <div id="example-line-container"></div>
 
<?php
 
 
        //Récupération de l'id de l'employeur
        $recup_id = mysql_query(" SELECT id_employeur FROM employeur WHERE login_empl = '$login' ");
        $data_id = mysql_fetch_assoc($recup_id); 
        $id_employeur = $data_id['id_employeur']; $id_employeur = intval($id_employeur);
 
 
 
    if (isset($_POST['submit'])) {
 
 
 
    $fichier=$_FILES['fichier']['name'];
    move_uploaded_file($_FILES['fichier']['tmp_name'],"dipes/".$fichier);
 
    $fp = fopen('dipes/'.$fichier,'r'); //lecture du fichier  
 
    if ($fp) { 
    while (!feof($fp)){ //on parcourt toutes les lignes
        $ligne=fgets($fp); // lecture du contenu de la ligne
 
        $code=substr($ligne,0,3);              $code = str_pad($code, 3, " ", STR_PAD_LEFT);
        $num_dipe = substr($ligne,3,6);        $num_dipe = str_pad($num_dipe, 5, " ", STR_PAD_LEFT);
        $cle = substr($ligne,8,1);             $cle = str_pad($cle, 1, " ", STR_PAD_LEFT);
        $contrib = substr($ligne,9,14);        $contrib = str_pad($contrib, 14, " ", STR_PAD_LEFT);
        $mois = substr($ligne,23,2);           $mois = str_pad($mois, 2, " ", STR_PAD_LEFT);
        $matri_empl = substr($ligne,25,11);    $matri_empl = str_pad($matri_empl, 11, " ", STR_PAD_LEFT); 
        $regime = substr($ligne,36,1);         $regime = str_pad($regime, 1, " ", STR_PAD_LEFT);
        $annee = substr($ligne,37,4);          $annee = str_pad($annee, 4, " ", STR_PAD_LEFT);
        $matri_ass = substr($ligne,41,11);     $matri_ass = str_pad($matri_ass, 11, " ", STR_PAD_LEFT);
        $nbr_jr = substr($ligne,52,2);         $nbr_jr = str_pad($nbr_jr, 2, " ", STR_PAD_LEFT);
        $sal_brut = substr($ligne,54,10);      $sal_brut = str_pad($sal_brut, 10, " ", STR_PAD_LEFT);
        $sal_exep = substr($ligne,64,10);      $sal_exep = str_pad($sal_exep, 10, " ", STR_PAD_LEFT);
        $sal_tax = substr($ligne,74,10);       $sal_tax = str_pad($sal_tax, 10, " ", STR_PAD_LEFT);
        $sal_cot = substr($ligne,84,10);       $sal_cot = str_pad($sal_cot, 10, " ", STR_PAD_LEFT);
        $sal_plaf = substr($ligne,94,10);      $sal_plaf = str_pad($sal_plaf, 10, " ", STR_PAD_LEFT);
        $irpp = substr($ligne,104,8);          $irpp = str_pad($irpp, 8, " ", STR_PAD_LEFT);
        $taxe_com = substr($ligne,112,6);      $taxe_com = str_pad($taxe_com, 6, " ", STR_PAD_LEFT);
        $num_ligne = substr($ligne,118,2);     $num_ligne = str_pad($num_ligne, 2, " ", STR_PAD_LEFT);
        $matri_int = substr($ligne,120,14);    $matri_int = str_pad($matri_int, 14, " ", STR_PAD_LEFT);
        $noms = substr($ligne,134,60);         $noms = str_pad($noms, 60, " ", STR_PAD_LEFT);
        $date = date('d/m/Y');  
 
 
 
 
        $insertion = mysql_query(" INSERT INTO tcompte_assure (id_employeur, codeenreg, noms,numdipe,clenumdipe,numero_contrib,moisdipe,anneedipe,matricule_empl,regime,numassure,nombrejour,salairebrut,salaireexeptionel,salairetaxable,salairecotcnps,salairecotplafonne,irpp,retenutaxecom,numligne,matriculeinterne,date_enreg) 
        VALUES ($id_employeur, '$code', '$noms', '$num_dipe', '$cle', '$contrib', '$mois', '$annee', '$matri_empl', '$regime', '$matri_ass', '$nbr_jr', '$sal_brut', '$sal_exep', '$sal_tax', '$sal_cot', '$sal_plaf', '$irpp', '$taxe_com', '$num_ligne', '$matri_int', '$date') ") or die(mysql_error()) ;
 
                if ($insertion) {  
                    $nettoyage = mysql_query("DELETE FROM tcompte_assure WHERE moisdipe = '' AND anneedipe = '' ");
                    ?>
 
                <script type="text/javascript"> window.location.href = "initialiser_dipe.php" ; </script>
            <?php    }else{   ?>
                    <script type="text/javascript"> window.location.href = "initialiser_dipe.php" ; </script>
 
 
            <?php    }
    }
          }   
 
    }
    ?>
 
            <form name='form' method='post' action='initialiser_dipe.php' enctype='multipart/form-data'>
                <table border='0' cellspacing='0' cellpadding='3' align="center">
                    <tr>
                    <td><font face="verdana" size=2><center>Veuillez sélectionner le fichier</td> 
                    <td> <input type="file" name="fichier"></center></font> </td> 
                    </tr><tr> <td>puis charger...</td> </tr>
                    <tr>
                    <td></td>  
                    <td> <input type="submit" name="submit" value="Charger le fichier"> </td>
                    </tr>
                    <tr><td>
                    <input type="hidden" name="action" value="ajouter"> </td></tr>
                </table>
            </form> 
            <br><br><br>
 
 
 
 
 
 
 
 
 
 
    </div>
 
    <!-- jQuery -->
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
    <!-- Morris Charts JavaScript -->
    <script src="../bower_components/raphael/raphael-min.js"></script>
    <script src="../bower_components/morrisjs/morris.min.js"></script>
    <script src="../js/morris-data.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>
 
</body>
</html>

Voici le code de la barre de chargement:

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
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Circular Progress Bar</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
 
  <body>
 
    <div id="page">
  <div class="progress-bar">
	    <canvas id="inactiveProgress" class="progress-inactive" height="275px" width="275px"></canvas>
    <canvas id="activeProgress" class="progress-active"  height="275px" width="275px"></canvas>
    <p>0%</p>
  </div>
  <div id="progressControllerContainer">
    <input type="range" id="progressController" min="0" max="100" value="15" />
  </div
</div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
        <script src="js/index.js"></script>
 
 
 
  </body>
</html>

Bonjour,

Une barre de progression me semble assez difficile à mettre en oeuvre car il faut estimer le pourcentage du fichier déjà chargé.
Un gif de chargement me semble une meilleure solution. Exemple :
http://eleydet.free.fr/BTS/tests/mod_liais/chargt.gif

Merci Eleydet pour ta réponse, j'i créer le meme gif avec photoshop et j'ai assayer de le placer dans mon code mais cà marche pas;
peu etre il est mal placé?

Code:

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
    if (isset($_POST['submit'])) {
 
    $fichier=$_FILES['fichier']['name'];
    move_uploaded_file($_FILES['fichier']['tmp_name'],"dipes/".$fichier);
 
    $fp = fopen('dipes/'.$fichier,'r'); //lecture du fichier  
 
    if ($fp) { 
    while (!feof($fp)){ //on parcourt toutes les lignes
        $ligne=fgets($fp); // lecture du contenu de la ligne
 
        $code=substr($ligne,0,3);              $code = str_pad($code, 3, " ", STR_PAD_LEFT);
        $num_dipe = substr($ligne,3,6);        $num_dipe = str_pad($num_dipe, 5, " ", STR_PAD_LEFT);
        $cle = substr($ligne,8,1);             $cle = str_pad($cle, 1, " ", STR_PAD_LEFT);
        $contrib = substr($ligne,9,14);        $contrib = str_pad($contrib, 14, " ", STR_PAD_LEFT);
        $mois = substr($ligne,23,2);           $mois = str_pad($mois, 2, " ", STR_PAD_LEFT);
        $matri_empl = substr($ligne,25,11);    $matri_empl = str_pad($matri_empl, 11, " ", STR_PAD_LEFT); 
        $regime = substr($ligne,36,1);         $regime = str_pad($regime, 1, " ", STR_PAD_LEFT);
        $annee = substr($ligne,37,4);          $annee = str_pad($annee, 4, " ", STR_PAD_LEFT);
        $matri_ass = substr($ligne,41,11);     $matri_ass = str_pad($matri_ass, 11, " ", STR_PAD_LEFT);
        $nbr_jr = substr($ligne,52,2);         $nbr_jr = str_pad($nbr_jr, 2, " ", STR_PAD_LEFT);
        $sal_brut = substr($ligne,54,10);      $sal_brut = str_pad($sal_brut, 10, " ", STR_PAD_LEFT);
        $sal_exep = substr($ligne,64,10);      $sal_exep = str_pad($sal_exep, 10, " ", STR_PAD_LEFT);
        $sal_tax = substr($ligne,74,10);       $sal_tax = str_pad($sal_tax, 10, " ", STR_PAD_LEFT);
        $sal_cot = substr($ligne,84,10);       $sal_cot = str_pad($sal_cot, 10, " ", STR_PAD_LEFT);
        $sal_plaf = substr($ligne,94,10);      $sal_plaf = str_pad($sal_plaf, 10, " ", STR_PAD_LEFT);
        $irpp = substr($ligne,104,8);          $irpp = str_pad($irpp, 8, " ", STR_PAD_LEFT);
        $taxe_com = substr($ligne,112,6);      $taxe_com = str_pad($taxe_com, 6, " ", STR_PAD_LEFT);
        $num_ligne = substr($ligne,118,2);     $num_ligne = str_pad($num_ligne, 2, " ", STR_PAD_LEFT);
        $matri_int = substr($ligne,120,14);    $matri_int = str_pad($matri_int, 14, " ", STR_PAD_LEFT);
        $noms = substr($ligne,134,60);         $noms = str_pad($noms, 60, " ", STR_PAD_LEFT);
        $date = date('d/m/Y');  
 
        while ($fp) {  echo "<img src=\"images/chargement.gif\">";  }
 
        $insertion = mysql_query(" INSERT INTO tcompte_assure (id_employeur, codeenreg, noms,numdipe,clenumdipe,numero_contrib,moisdipe,anneedipe,matricule_empl,regime,numassure,nombrejour,salairebrut,salaireexeptionel,salairetaxable,salairecotcnps,salairecotplafonne,irpp,retenutaxecom,numligne,matriculeinterne,date_enreg) 
        VALUES ($id_employeur, '$code', '$noms', '$num_dipe', '$cle', '$contrib', '$mois', '$annee', '$matri_empl', '$regime', '$matri_ass', '$nbr_jr', '$sal_brut', '$sal_exep', '$sal_tax', '$sal_cot', '$sal_plaf', '$irpp', '$taxe_com', '$num_ligne', '$matri_int', '$date') ") or die(mysql_error()) ;
 
                if ($insertion) {  
                    $nettoyage = mysql_query("DELETE FROM tcompte_assure WHERE moisdipe = '' AND anneedipe = '' ");
                    ?>
 
                <script type="text/javascript"> window.location.href = "initialiser_dipe.php" ; </script>
            <?php    }else{   ?>
                    <script type="text/javascript"> window.location.href = "initialiser_dipe.php" ; </script>
 
 
            <?php    }
    }
          }   
 
    }

J'appelle l'image dans la boucle while