barre de progresssion
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
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
Salut,
Une recherche rapide sur le site de @Graf' et voilà: http://www.grafikart.fr/tutoriels/jquery/upload-drop-172/
A un moment donné il implémente une progress bar, tu pourras allègrement t'en inspirer ;)
Merci Cyprien de m'avoir donné cette piste. Je regarde ça et je te tiens au courant.
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...
Si, à partir de 30min20s.
Sinon il y a ce tutoriel http://www.grafikart.fr/tutoriels/jquery/progress-bar-440/
Mais tu recherches comment ?? lol
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
@utilisateur: Oui moi aussi je préfère les tutos de @Graf' mais ça reste un très bon tuto ;)
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 ?
https://blueimp.github.io/jQuery-File-Upload/
Tu as ça aussi qui fonctionne très bien et qui à un bon rendu.