Ajout d une barre de progression sur l upload des images [Résolu]

Signaler
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
-
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
-
bonjour
a tous j ai un fichier d upload d image
mais j aurais souhaiter savoir comment venir y intégrer une barre de progression

voici mon fichier
merci
<?php
session_start();

$dossier = 'uploads/';
$fichier = basename($_FILES['file']['name']);
$taille_maxi = 5000000;
$taille = filesize($_FILES['file']['tmp_name']);
$extensions = array('.png', '.PNG', '.gif', '.jpg', '.JPG', '.jpeg', '.JPEG');
$extension = strrchr($_FILES['file']['name'], '.'); 
//Début des vérifications de sécurité...
if(!in_array($extension, $extensions)) //Si l'extension n'est pas dans le tableau
{
     $erreur = 'Vous devez uploader un fichier de type png, gif, jpg, jpeg, txt ou doc...';
}
if($taille>$taille_maxi)
{
     $erreur = 'Le fichier est trop gros...';
}
 if(file_exists("uploads/" . $_FILES["file"]["name"])){
	$erreur = ' L\'image existe déjà.';
 }
if(!isset($erreur)) //S'il n'y a pas d'erreur, on upload
{
     //On formate le nom du fichier ici...
     $fichier = strtr($fichier, 
          'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 
          'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
     $fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
     if(move_uploaded_file($_FILES['file']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné..
		      {
          echo ' <span style="margin-left:30%;"> <br /> Upload effectué avec succès !  </span>';
		 	include('mabd.php');
		 $req =$bdd->prepare('INSERT INTO galerie_images ( nom_img, nom_min) VALUES ( :nom_img, :nom_min)');
         $req->execute(array(
			'nom_img' => $_FILES["file"]["name"],
			 'nom_min' => $_FILES["file"]["name"]
                                                   ));
     }
     else //Sinon (la fonction renvoie FALSE).
     {
          echo 'Echec de l\'upload !';
     }
}
else
{
     echo $erreur;
}
?>

109 réponses

Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
bonjour a tous

voila je pense avoir trouve quelque chose
mais le soucis que je rencontre c est que le fichier s'upload tout seul des qu il a été choisi
sans que je lui demande
y a t il moyen de modifier le code de tel façon a c que le fichier soit uploader grâce a submit
merci de l aide
<input type="submit" name="submit" value="Upload">


voici le code actuel
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1" onchange="uploadFile()"><br>
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>


et le javascript

function _(el) {
  return document.getElementById(el);
}

function uploadFile(){
  var file = _("file1").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file1", 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"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
  //use file_upload_parser.php from above url
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
bon rien ne fonctionne la seule chose que j ai trouve c est d indiquer un message durant l upload

lorsque je choisi l image j utilise ce code


<form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="fileUpload">Fichier:</label>
<input type="file" name="photo" id="fileUpload">
<input type="submit" name="submit" value="Upload">
<p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
<p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
</div>
</form>


et je viens de trouver ce morceau de code que j essaye d appliquer mais cela ne fonctionne pas

   <form action="a.php" method="post" enctype="multipart/form-data">
     <input type="file" id="fileSQL" name="fileSQL" required />
     <input type="submit" value="Upload" onclick="display_loader()"/>
</form>
  

function display_loader()
{
     document.getElementById('loader').innerHTML = "<img src='loader.gif' alt='load'/><br/>Loading, please wait ...";}


j ai donc modifier mon fichier html

<form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="fileUpload">Fichier:</label>
<input type="file" name="photo" id="fileUpload">
<input type="submit" name="submit" value="Upload" onclick="display_loader()"/>
<p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
<p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
</div>
</form>
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Bonjour
Tu ne peux pas le faire sans faire de l'Ajax.
Car avec un submit normal, ça envoie les données en même temps que ça recharge ou change de page...

Le premier code que tu avais trouvé utilise l'Ajax et c'est la seule façon de faire si tu veux disposer d'une barre de progression ou d'un loader lors de l'envoi des données.
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
bonjour Jordane
merci pour la réponse
donc même avoir un simple message en javascript cela ne fonctionnera pas ?
car une fois mon image uploader , je me dirige vers un autre fichier qui affiche l image téléchargée
donc du coup n y a t il pas moyen d afficher un message une fois que l on clic sur l upload et qui disparaît une fois que j arrive sur l autre page
en s assurant bien évidement qu il y a bien une image a télécharger

car lorsque je regarde ce code .. une barre de progression agit bien durant l upload

https://codepen.io/PerfectIsShit/pen/zogMXP

j ai trouve ceci aussi
https://codes-sources.commentcamarche.net/forum/affich-619989-comment-afficher-un-message-d-attente-pendant-un-upload
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Le premier lien utilise également l'Ajax
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
merci pour ton aide jordane
oui j ai aussi essayer de l appliquer a mon formulaire
car a la longue de chercher
j ai compris ce que je devais faire pour faire declencher le script de javascript

j ai donc fait ceci

<form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="fileUpload">Fichier:</label>
<input type="file" name="photo" id="fileUpload">
<input type="submit" name="submit" value="Upload" onclick="uploadFile()"/>
<p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
<p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
</div>
</form>

en changeant bien sur file1 en file
mais rien ne se passe
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Et qu'as tu mis comme code JavaScript ?
Tu l'as adapté pour cibler le bon fichier php qui fera l'upload ?
As-tu vérifié dans la console de ton navigateur si il n'y avait pas des messages d'erreur ?


Comprends-tu un minimum le fonctionnement du code JavaScript que tu as trouvé ?.... Ça serait déjà un bon début histoire de savoir ce que tu utilises comme code et ainsi être capable de le debuger si besoin..
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
merci pour la reponse jordane
j ai donc mis ce code car c est celui qui me parle le plus

function _(el) {
  return document.getElementById(el);
}

function uploadFile(){
  var file = _("file").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file", 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"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
  //use file_upload_parser.php from above url
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}


et donc en fait il faut que j adapte ce code sur la page qui demande a l utilisateur d uploader une image avec le form



car dans l exemple que j ai trouve cela ce passe ainsi

https://codepen.io/PerfectIsShit/pen/zogMXP

ensuite j ai donc pris mon form pour le modifier de cette façon
  <form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
   <div class="form-group">
        <label for="fileUpload">Fichier:</label>


        <input type="file" name="photo" id="upload_form" required>
        <input type="submit" name="submit" value="Upload" onclick="uploadFile()"/>
        <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
        <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
        
</div>
           </div>
    </form> 


pour ce qui est de ce que fait le code ajax
il appelle deux fonctions d après ce que je comprends
et il affiche une barre de progression et l avancée du ficher envoyé

dans ma console aucune erreur
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Quand je dis "comprendre" ce que fait le code Javascript ... c'est ... ligne par linge.. à quoi correspondent les instructions..

Par exemple, à quoi sert cette ligne à ton avis :
ajax.open("POST", "file_upload_parser.php");
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138 >
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021

je suppose que cela ouvre en post .... ah mince je l avais pas vu celui la ...
j ai donc modifie par cible-fichier.php
mais cela ne fonctionne toujours pas

pour le reste oui je pense comprendre
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Pour voir ce qui cloche il faut utiliser la console du navigateur ( je te conseille d'utiliser FireFox ) et de bien penser à activer le debugage XHR



Ensuite, tu exécutes le code .. et tu "déplies" la ligne "post" et tu regardes ce qui s'affiche dans l'onglet reponse ainsi que dans l'onglet requête
Tu nous en fais des captures écran et tu nous les mets dans la discussion...
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
merci pour ton aide jordan

je n ai jamais fait ce genre de manipulation
voici une copie d écran avec le debuggage XHR que je pense être bien active
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558


Non, il n'est pas activé ...
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138 >
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021

ah ok
voila je viens de le faire
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
ah mince nos message ce sont croise
mais je ne vois rien de ton image c est trop petit jordane
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
En bas à droite de l'image que tu nous as montré... le "bouton" xhr n'est pas activé ... clique dessus.
Une fois que ça sera fait, dans la console tu devrais voir les lignes de requêtes"post" lorsque tu upload tes images.
Tant que tu n'as pas ces lignes.. c'est que le debug xhr n'est pas activé.
Si tu n'arrives pas à l'activer... je t'invite à poster une question dans le forum "internet" .. vu que ça concerne le fonctionnement du navigateur internet et non la programmation à proprement parler.
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
desole j ai eu une panne de réseau
voici donc l image


un grand merci pour ton aide jordane

Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
je pense que tu veux voir ceci

Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Je vois surtout que tu as des lignes en rouge ce qui implique que tu as des erreurs..
La première erreur concerne la ligne de code suivante
var file = _("file").files[0];    

Je te laisse corriger en étant de bon id
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
bonjour jordane

merci pour le temps consacré

voila je pense avoir bien corrige j ai mis l ID sur file
j ai une erreur en moins

la suivante apparemment c est sur cette ligne
 ajax.addEventListener("abort", abortHandler, false);


qui apparemment correspond a cette ligne

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}


je suppose que cela indique que l upload a échoué

Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Non
Cela indique qu'il ne trouve pas d'élément html ayant pour id status
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
donc mon id n'est pas encore bonne ?
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Tu as, dans ton code html, un élément avec cet id ?
En plus de ton champ input hein....
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
merci jordane
je reviens plus tard
car j ai mis le bordel dans mon code
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
re bonjour

voila j ai tout remis en état ....
donc voila mon code modifie de form

mais toujours les mêmes erreurs

pourtant j ai mis file partout ...

	 <form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">

	  <div class="form-group">

        <label for="file">Fichier:</label>

        <input type="file" name="photo" id="file">

        <input type="submit" name="file" id="file" value="Upload" onclick="uploadFile()"/>

        <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>

        <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>

		 </div>

    </form>
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Il ne faut pas mettre file partout et n'importe comment...
Un id doit être unique...
Par contre, il faut respecter le code HTML qui a été fourni avec l'exemple !!
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
je reprends encore une fois de nouveau depuis le debut dans ce cas et c est vrai que c est ce que j aurais du faire

dans mon code j ai ces lignes

    <input type="file" name="photo" id="fileUpload">
        <input type="submit" name="submit" value="Upload">



dans l exemple celle ci
 <input type="file" name="file1" id="file1" onchange="uploadFile()"><br>


elle correspond a mon avis a ma ligne avec le submit puisque c est elle qui déclenche l envoi

donc cette partie de mon code devrait ressemblait a ceci

<input type="file" name="file1" id="file1">
        <input type="submit" name="file1" value="Upload"  onchange="uploadFile()">


pour l instant l hébergeur gratuit ou je fais des essais fais des caprices
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
je viesn de refaire un esai
je n ai plus d erreur mais la barre de telechargement ne fonctionne pas

	 
	     <form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"id="upload_form" enctype="multipart/form-data" method="post">
	  	  <div class="form-group">
        <label for="fileUpload">Fichier:</label>
        
        
         <input type="file" name="photo" id="file1">
        <input type="submit" name="file1" value="Upload"  onchange="uploadFile()">
        
          <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
        
        
        
        <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
        <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>

		 </div>

    </form>

</div>


<script>function _(el) {
  return document.getElementById(el);
}

function uploadFile(){
  var file = _("file1").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file1", 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"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
  //use file_upload_parser.php from above url
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}</script>
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Donc si tu ne vois plus d'erreur, maintenant on peut regarder le contenu de la liste post dans la console JS.
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
ok jordane
as tu un lien ou une petite explication pour moi y parvenir
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
je pense que c est ceci



Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Oui mais je t'avais demandé les onglets requête et réponse
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
merci pour l aide jordane

ils disent que la requête a été tronquée et cela est très long en terme d affichage


et pour la reponse voici

Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
Ah oui.
Donc maintenant que tu fais l'upload en Ajax ( et non plus en "submit" ), il faut modifier le script PHP qui sert à faire l'upload.
Messages postés
2905
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
12 juin 2021
138
Merci pour ton aide Jordane et donc je dois m y prendre comment ...
Messages postés
32957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 juin 2021
3 558
alors je suis doué.. mais pas encore devin. :-)
Il faudrait que tu nous partages le code complet du fichier file_upload_parser.php...