barre de progresssion

Par utilisateur, il y a 10 ans

Javascript

Bonjour à toutes et à tous

Je souhaite faire une barre de progression pendant l'upload de fichier. J'ai beaucoup cherché sur internet puis j'ai trouvé un tuto video simple et accessible pour moi. Hélas tout ne se passe pas comme prévue la barre de chargement (<progress>) existe mais elle n'affiche pas la progression. Pourtant l'upload se passe très bien.
Voici la page index

<html> <head> <meta http-equiv="Content-Language" content="fr"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <script> function _(elmt){ return document.getElementById(elmt); } function uploadFichier(){ /*alert ("upload");*/ var file = _('file').files[0]; alert ("upload 2"); alert(file.name); var data = new FormData(); data.append('file', file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventLister("load", completeHandler, false); ajax.addEventLister("error", errorHandler, false); ajax.addEventLister("abort", abortHandler, false); ajax.open("POST", "upload.php"); ajax.send(data); } function progressHandler(){ _('status_bytes').innerHTML = event.loaded + 'bytes uploadé sur' + event.total ; var pourcentage = (event.loaded / event.total) * 100 ; _('progressBar').value = Math.round(pourcentage); _('status').innerHTML = Math.round(pourcentage) + '% uploadé... Patientez'; } function completeHandler(event){ _('status').innerHTML = event.target.responseText; _('progressBar').value = 0; } function errorHandler(){ _('status').innerHTML = "L'upload a échoué"; } function abortHandler(){ _('status').innerHTML = "L'upload annulé"; } </script> <title>FORM</title> </head> <body> <form method="post" enctype="multipart/form-data" action="upload.php"> <input type="file" id="file" name="file"/> <br /> <input type="submit" value="Envoyer" onclick="uploadFichier()"/> <br/> <br/> <progress id="progressBar" value="0" max="100" style="width:500px"></progress> </form> <div id="status"></div> <div id="status_bytes"></div> </body> </html>

Voici la page de traitement :

<?php if(!empty($_FILES)){ if(move_uploaded_file($_FILES['file']['tmp_name'], 'files/'.$_FILES['file']['name'])){ echo "transfert ok"; } } ?>

Voila donc l'upload fonctionne, la barre est présente, mais elle ne s'anime pas ?!

S'il vous plait pouvez-vous me donner un p'tit coup de pouce

Merci

9 réponses

utilisateur, il y a 10 ans

Merci Cyprien de m'avoir donné cette piste. Je regarde ça et je te tiens au courant.

utilisateur, il y a 10 ans

Bon je viens de visionner ce tutoriel et il n'y a pas d'expliquation pour réaliser une barre de chargement . Je continue mes recherches...

utilisateur, il y a 10 ans

Arf oui exact. je vais tenter de me depatouiller avec ça, merci. Je connaissais le deuxième lien mais je t'avoue que je préfère les expliquations de la personne qui présente le premier tuto que tu m'as indiqué.

allé je m'y replonge je te tiens au courant merci

betaWeb, il y a 10 ans

@utilisateur: Oui moi aussi je préfère les tutos de @Graf' mais ça reste un très bon tuto ;)

utilisateur, il y a 10 ans

Bonjour tout le monde,

ok j'essaye d'aprendre hein... pas facile voici le code que j'ai et qui fonctionne en partie.

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function uploadFile() { var fd = new FormData(); fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.open("POST", "upload.php"); xhr.send(fd); } function uploadProgress(evt) { var pourcentage_complet = 0 ; if (evt.lengthComputable) { var pourcentage_complet = Math.round(evt.loaded * 100 / evt.total); document.getElementById('pourcentage_actuel').innerHTML = pourcentage_complet.toString() + '%'; } } </script> </head> <body> <form id="form1" enctype="multipart/form-data" method="post" action="upload.php"> <input type="file" name="fileToUpload" id="fileToUpload"/> <input type="button" onclick="uploadFile()" value="Poster" /> <div id="pourcentage_actuel"></div> <progress id="barre" value="pourcentage_actuel" max="100"></progress> </form> </body> </html>

Il faudrais que "pourcentage actuel" représente la value de la barre de progression, tout simplement pour que la barre s'anime
et ouvrir la page upload.php quand la progression est terminée.

avez des idées ?

utilisateur, il y a 10 ans

Bon j'ai trouvé tout seul

Voici un code qui fonctionne pour celles et ceux qui en auraient besoin à l'avenir...

page html

<!DOCTYPE html> <html> <head> <script> function _(el){ return document.getElementById(el); } function envoisfichier(){ var file = _("photo1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("photo1", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "file_upload_parser.php"); ajax.send(formdata); } function progressHandler(event){ _("controle").innerHTML = "envois en cours "+event.loaded+" bytes sur "+event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("statut").innerHTML = "Un instant s'il vous plait..."+Math.round(percent)+"% "; } function completeHandler(event){ _("statut").innerHTML = event.target.responseText; _("progressBar").value = 0; } function errorHandler(event){ _("statut").innerHTML = "erreur d'envois"; } function abortHandler(event){ _("statut").innerHTML = "envois interropu"; } </script> </head> <body> <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="file" name="photo1" id="photo1"><br> <input type="button" value="envois" onclick="envoisfichier()"> <h3 id="statut"></h3><br/> <p id="controle"></p><br/> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> </form> </body> </html>

page cible (file_upload_parser.php)

<?php $fileName = $_FILES["photo1"]["name"]; // The file name $fileTmpLoc = $_FILES["photo1"]["tmp_name"]; // File in the PHP tmp folder $fileType = $_FILES["photo1"]["type"]; // The type of file it is $fileSize = $_FILES["photo1"]["size"]; // File size in bytes $fileErrorMsg = $_FILES["photo1"]["error"]; // 0 for false... and 1 for true if(move_uploaded_file($fileTmpLoc, "files/$fileName")){ echo "L'image à bien été envoyé"; } else { echo "l'image n'a pas été envoyé"; } ?>

J'ai testé ça fonctionne.

Merci à betaWeb