Ajout d une barre de progression sur l upload des images

Résolu
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   -  
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   -
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;
}
?>
A voir également:

109 réponses

Réponse 1 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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";
}
0
Réponse 2 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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>
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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.
0
Réponse 3 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Le premier lien utilise également l'Ajax
0
Réponse 4 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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..
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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");
0
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
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
0
Réponse 6 / 109
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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...
0
Réponse 7 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 


Non, il n'est pas activé ...
0
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
ah ok
voila je viens de le faire
0
Réponse 8 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
ah mince nos message ce sont croise
mais je ne vois rien de ton image c est trop petit jordane
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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.
0
Réponse 9 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
desole j ai eu une panne de réseau
voici donc l image


un grand merci pour ton aide jordane

0
Réponse 10 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
je pense que tu veux voir ceci

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
0
Réponse 11 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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é

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Non
Cela indique qu'il ne trouve pas d'élément html ayant pour id status
0
Réponse 12 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
donc mon id n'est pas encore bonne ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Tu as, dans ton code html, un élément avec cet id ?
En plus de ton champ input hein....
0
Réponse 13 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
merci jordane
je reviens plus tard
car j ai mis le bordel dans mon code
0
Réponse 14 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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>
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 !!
0
Réponse 15 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
0
Réponse 16 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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>
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Donc si tu ne vois plus d'erreur, maintenant on peut regarder le contenu de la liste post dans la console JS.
0
Réponse 17 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
ok jordane
as tu un lien ou une petite explication pour moi y parvenir
0
Réponse 18 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
je pense que c est ceci



0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Oui mais je t'avais demandé les onglets requête et réponse
0
Réponse 19 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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.
0
Réponse 20 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
Merci pour ton aide Jordane et donc je dois m y prendre comment ...
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
alors je suis doué.. mais pas encore devin. :-)
Il faudrait que tu nous partages le code complet du fichier file_upload_parser.php...
0