 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Une barre de progression en JavaScript |
| |
| "Comment mettre en place une barre de progression lorsque j'envoie des fichiers via un formulaire Web ? Les fichiers sont gros et j'ai besoin d'informations pendant le traitement."
(04/04/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Il est parfaitement possible de réaliser une barre de progression directement au sein du navigateur, sans autres techniques que JavaScript et CSS. Voici un exemple simplifié de la barre proposée par Hans Kuipers. Celui-ci créé simplement une boucle qui augmente la largeur d'un DIV via CSS.
function timedProg() { if (i <= 300) { if (i > 40) { document.getElementById("c").innerHTML=parseInt(i/3)+"%"; } document.getElementById("b").style.width=i+"px"; var j=0; while (j<=100) j++; setTimeout("timedProg();", 20); i++; } }
Une barre de progression n'a cependant d'intérêt que si elle représente effectivement la progression d'une action en cours. Dans le cas d'un envoi de fichier par un formulaire, il faudra récupérer, à l'aide d'un script côté serveur, le nombre d'octets déjà transférés et le nombre d'octets total, et faire afficher le pourcentage adéquat.
Il faut donc modifier le code PHP utilisé lors de l'envoi de fichiers par le formulaire, pour inclure un envoi des données relatives à la taille vers le client, afin que JavaScript puisse dessiner la barre correctement. Deux méthodes possibles : soit ouvrir une fenêtre popup dans laquelle s'affichera la barre, fenêtre mise à jour régulièrement pour récupérer les données du script PHP ; ou bien, utiliser l'objet XMLHttpRequest pour mettre à jour la barre directement dans la page du formulaire.
|
|
|
|
|
|
|
