Ajout d une barre de progression sur l upload des images

[Résolu]
Signaler
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
-
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 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
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Comment, peux-tu avoir dans l' url le chemin vers le fichier cible PHP alors que tu fais de l'Ajax... ???
Tu n'as pas laissé le bouton en Submit par hasard ??

Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
alors la jordane
c est surement pas a moi a poser cette question
cela reste du grand mystère
non je n ai rien changer a ton code

<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="photo">
                <input type="submit" name="photo" 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>
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
alors la jordane je n en sais rien

non pas du tout j ai laisse le code tel quel

<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="photo">
                <input type="submit" name="photo" 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>
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
désolé je pensais que le message n avait pas passé
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Non pas du tout dis tu...
et ça
   <input type="submit"

....

Vu que tu fais de l'ajax, change le en
  <input type="button"
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
tu vas être déçu
car cela n a rien change ...même après le nettoyage du navigateur
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Ca change que lorsque tu envoies les données de ton formulaire .. tu restes sur ta page au lieu de partir sur la page fichier-cible.php non ???

NB: Tu peux aussi retirer l'attribut "action" de ton form.
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
oui en effet je ne parviens plus a passer sur la page fichier-cible.php

je retire ceci

 action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Ben c'est normal et c'est ce qu'on veut...
Vu que maintenant tu fais de l'Ajax...
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650 >
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021

Ce qu'il faut désormais c'est nous dire ce que tu as dans la console
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
ah bon , c est toujours bon a savoir

voici la console , mais je ne parviens plus a passer sur la page fichier-cible.php

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
ah bon , c est toujours bon a savoir

voici la console , mais je ne parviens plus a passer sur la page fichier-cible.php

Comment ça tu ne parviens plus à passer sur la page fichier-cible.php ....
COmment peux tu me dire OK c'est bon à savoir et ensuite me dire ça .. ???

Je te l'ai dit ...

Vu que désormais tu envoies ton formulaire en AJAX ... TU NE DOIS PLUS aller sur la page fichier-cible.php ....

Par contre, tu as un souci ...
Là on voit le code javascript dans ta page.......
Tu as du mal écrire les balises script ...
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
ah bon , c est toujours bon a savoir

voici la console , mais je ne parviens plus a passer sur la page fichier-cible.php

Comment ça tu ne parviens plus à passer sur la page fichier-cible.php ....
COmment peux tu me dire OK c'est bon à savoir et ensuite me dire ça .. ???


c est toujours bon a savoir avec le
<input type="button"


Je te l'ai dit ...

Vu que désormais tu envoies ton formulaire en AJAX ... TU NE DOIS PLUS aller sur la page fichier-cible.php ....

comme la personne pouvait poster un commentaire après l upload sur la page fichier-cible.php
je modifierais le code pour qu'il puisse le faire sur la page form-fichier



Par contre, tu as un souci ...
Là on voit le code javascript dans ta page.......
Tu as du mal écrire les balises script ...

non le code est bien encadre
regarde

c est toujours celui que tu m as donne

 <script >
     //--------------------------------------------------------//     
     // ON PLACE LE JAVASCRIPT  JUSTE AVANT  le </body>
     //--------------------------------------------------------//
     
      var pseudo = '<?php echo $pseudo;?>';
      var id= '<?php echo $id ;?>';
      console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..

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

      function uploadFile(){
        var file = _("photo").files[0];
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo ", pseudo );
        formdata.append("id", id);
        
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id);
        console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..
        
        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", "cible-fichier.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) {
        let res = typeof(event.target.responseText)!='undefined' ? JSON.parse(event.target.responseText) : "";
        let message = typeof(res.message)!='undefined' ? res.message : "";
        let error = typeof(res.error)!='undefined' ? res.error : null;
        
        _("status").innerHTML = error ? error : message;
        _("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>


j ai également une question pourquoi avoir corriger la page fichier-cible.php si cela n est plus pour l utilisée ...
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
pourquoi avoir corriger la page fichier-cible.php si cela n est plus pour l utilisée ..

Qui a dit qu'elle n'est plus utilisée ?
On y fait appel à travers l'ajax...

Le principe :
Tu as un formulaire
Via javascript, tu récupères les infos qui s'y trouvent
Tu fais un appel AJAX via un script Javascript vers un script PHP en lui envoyant les données
Le script PHP renvoi une réponse dans le script ajax Javascript
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
ah d accord jordane ...
merci pour l information
je suis encore tres loin de pouvoir effectuer ce genre de chose hein

quoi qu il en soit
rien n a changer le code ajax est toujours dans le fond de la page
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Peux tu nous poster le code généré ( donc celui que tu récupères lorsque tu affiches ta page dans ton navigateur ) ?
(le code de la page qui contient le formulaire et le code javascript hein... pas du fichier cible... )
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
oui jordane c est celui que tu as corrige

<?php 
session_start();

//Affichage des erreurs PHP ( il faut que je te le remette à chaque fois ??!! )
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);


$pseudo = !empty($_GET['pseudo']) ? $_GET['pseudo']: NULL;
$id = !empty($_GET['id']) ? $_GET['id']: NULL;

if(!$id || !$pseudo ){
  header('Location:../login-obligatoire-peche-perle.php');
  exit;
}
?>
<!doctype html>
<html lang="en">
  <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="./css/album.css">
      <title> formulaire envoi de fichiers</title>
       	<style>
       @media (min-width: 0px) and (max-width:600px) {
          .container1{
            width: 85%;   
          }
       }
        @media (min-width: 601px) and (max-width:2500px) {
          .container1{
              width: 50%;    
          }
       }
	 </style>
  </head>   <!-- fin head -->
 
   <body >   <!-- debut body -->
      <!-- debut container total-->
      <div class="container">
     
       <!-- debut container entete-->
       <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut banniere -->
          <?php include("./include/baniere-peche-perle.php"); ?>
          <!-- fin banniere -->
          <!-- debut menu -->
          <?php include("./include/menu.php"); ?>
          <!-- fin menu -->
       </div>
       <!-- fin container entete-->
        
      <div class="container1" style=" max-width: 100%;margin:auto;">
           <form id="upload_form" enctype="multipart/form-data" method="post">
              <div class="form-group">
                <label for="fileUpload">Fichier:</label>
                <input type="file" name="photo" id="photo">
                <input type="button" name="photo" 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>
      <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut pied de page-->
          <?php include("./include/pied-de-page.php"); ?>
          <?php include("./include/footer.php"); ?>
      </div>
    </div>
    
    <script >
     //--------------------------------------------------------//     
     // ON PLACE LE JAVASCRIPT  JUSTE AVANT  le </body>
     //--------------------------------------------------------//
     
      var pseudo = '<?php echo $pseudo;?>';
      var id= '<?php echo $id ;?>';
      console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..

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

      function uploadFile(){
        var file = _("photo").files[0];
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo ", pseudo );
        formdata.append("id", id);
        
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id);
        console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..
        
        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", "cible-fichier.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) {
        let res = typeof(event.target.responseText)!='undefined' ? JSON.parse(event.target.responseText) : "";
        let message = typeof(res.message)!='undefined' ? res.message : "";
        let error = typeof(res.error)!='undefined' ? res.error : null;
        
        _("status").innerHTML = error ? error : message;
        _("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>

  
  </body>
</html>
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
ça... ce n'est pas le code GENERE !!!!!

Le code généré ne contient pas de PHP !!!
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
mais c est bien le fichier qui contient le formulaire ...
je n ai que deux fichiers

un fichier" form-fichier.php"
et l autre "fichier-cible.php"

ah tu veux dire celui qui s affiche dans le code source du navigateur ?
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
<!doctype html>
<html lang="en">
  <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="./css/album.css">
      <title> formulaire envoi de fichiers</title>
       	<style>
       @media (min-width: 0px) and (max-width:600px) {
          .container1{
            width: 85%;   
          }
       }
        @media (min-width: 601px) and (max-width:2500px) {
          .container1{
              width: 50%;    
          }
       }
	 </style>
  </head>   <!-- fin head -->
 
   <body >   <!-- debut body -->
      <!-- debut container total-->
      <div class="container">
     
       <!-- debut container entete-->
       <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut banniere -->
          	<div class="parent"><img src="./image/top_image_perle-peche.jpg" alt="Nature" class="responsive">
			<div class="child1"></div>
			<div class="child1 child2">
				<div class="reseau-sociaux">
					<div class="reseau-sociaux-youtube">
						<a href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1" target="_blank"><img src="./image/youtube-peche-perle.png" alt="Nature" class="responsive"></a>
					</div>
					<div class="reseau-sociaux-blogger">
						<a href="http://philleperleur.blogspot.com/" target="_blank"><img src="./image/blogger-peche-perle.png" alt="Nature" class="responsive"></a>
					</div>
				</div>
			</div>
		</div>          <!-- fin banniere -->
          <!-- debut menu -->
          
		
		
	
		
		
		
		                     	<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="width:100%;margin:auto;margin-top: 0.5%:margin-bottom:0.5%">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
			<div class="collapse navbar-collapse" id="navbarsExample06">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active"> <a class="nav-link" href="../accueil-peche-perle.php">Acceuil <span class="sr-only">(current)</span></a> </li>
					<li class="nav-item"> <a class="nav-link" href="../mon-histoire.php" >Mon histoire</a> </li>
					<li class="nav-item"> <a class="nav-link" href="../ma-technique.php" >Ma technique</a> </li>
					<li class="nav-item"> <a class="nav-link" href="../boutique.php">Boutique</a> </li>
					<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Reseaux sociaux
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="http://philleperleur.blogspot.com/">Blogger</a>
          <a class="dropdown-item" href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1">Youtube</a>
                </li>
						<li class="nav-item"> <a class="nav-link" href="../contact.php" >Contact</a> </li>
				
				</ul>
			</div>
			<ul class="navbar-nav lg-auto"> 
	
				<a class="bg-primary text-white" style="margin-right:10px;margin-top:10px;" href="../deconnexion.php">Deconnexion</a> 
			
			</ul>
		</nav>
        
`
   
   
             <!-- fin menu -->
       </div>
       <!-- fin container entete-->
        <!-- action="cible-fichier.php?pseudo= $ps-->
      <div class="container1" style=" max-width: 100%;margin:auto;">
           <form id="upload_form" enctype="multipart/form-data" method="post">
              <div class="form-group">
                <label for="fileUpload">Fichier:</label>
                <input type="file" name="photo" id="photo">
                <input type="button" name="photo" 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>
      <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut pied de page-->
          <!-- debut pied de page-->
  <footer class="pt-4 my-md-5 pt-md-5 border-top" >
    <div class="row">
      <div class="col-12 col-md">
        <img class="mb-2" src="../assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
        <small class="d-block mb-3 text-muted">© 2017-2020</small>
      </div>
      <div class="col-6 col-md">
        <h5>Boutique</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="../condition-generale-vente.php">Conditions générales</a></li>
          <li><a class="text-muted" href="../frais-de-livraison.php">Frais livraison</a></li>
          <li><a class="text-muted" href="../moyen-paiement.php">Moyen paiement</a></li>
          <li><a class="text-muted" href="https://www.mondialrelay.be/fr-be/trouver-le-point-relais-le-plus-proche-de-chez-moi/">Trouver son point Mondial relay</a></li>
          <li><a class="text-muted" href="https://www.mondialrelay.be/fr-be/suivi-de-colis/">Suivre son colis mondial relay</a></li>
         
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>Conditions diverses</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="../conditions-general-peche-perle.php">Conditions générales</a></li>
          <li><a class="text-muted" href="../conditions-general-peche-perle.php">Propriétés intellectuelles</a></li>
          <li><a class="text-muted" href="./conditions-general-peche-perle.php">Cookies</a></li>
          <li><a class="text-muted" href="./conditions-general-peche-perle.php">Rgpd</a></li>
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>Contact</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="../contact.php">Mail</a></li>
          <li><a class="text-muted" href="../contact.php">Formulaire</a></li>
          <li><a class="text-muted" href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1">Youtube</a></li>
          <li><a class="text-muted" href="http://philleperleur.blogspot.com/">Blogger</a></li>
        </ul>
      </div>
    </div>
  </footer>             <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <!--
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
         -->      </div>
    </div>
    
    <script >
     //--------------------------------------------------------//     
     // ON PLACE LE JAVASCRIPT  JUSTE AVANT  le <div style="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"><a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website&utm_content=footer_img"><img src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png" alt="www.000webhost.com"></a></div><script>function getCookie(t){for(var e=t+"=",n=decodeURIComponent(document.cookie).split(";"),o=0;o<n.length;o++){for(var i=n[o];" "==i.charAt(0);)i=i.substring(1);if(0==i.indexOf(e))return i.substring(e.length,i.length)}return""}getCookie("hostinger")&&(document.cookie="hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;",location.reload());var wordpressAdminBody=document.getElementsByClassName("wp-admin")[0],notification=document.getElementsByClassName("notice notice-success is-dismissible"),hostingerLogo=document.getElementsByClassName("hlogo"),mainContent=document.getElementsByClassName("notice_content")[0];if(null!=wordpressAdminBody&¬ification.length>0&&null!=mainContent){var googleFont=document.createElement("link");googleFontHref=document.createAttribute("href"),googleFontRel=document.createAttribute("rel"),googleFontHref.value="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700",googleFontRel.value="stylesheet",googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css="@media only screen and (max-width: 576px) {#main_content {max-width: 320px !important;} #main_content h1 {font-size: 30px !important;} #main_content h2 {font-size: 40px !important; margin: 20px 0 !important;} #main_content p {font-size: 14px !important;} #main_content .content-wrapper {text-align: center !important;}} @media only screen and (max-width: 781px) {#main_content {margin: auto; justify-content: center; max-width: 445px;}} @media only screen and (max-width: 1325px) {.web-hosting-90-off-image-wrapper {position: absolute; max-width: 95% !important;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} #main_content {margin-left: 5%; max-width: 445px;} .web-hosting-90-off-image-wrapper {position: absolute; display: flex; justify-content: center; width: 100%; }} .web-hosting-90-off-image {max-width: 90%;} .content-wrapper {min-height: 454px; display: flex; flex-direction: column; justify-content: center; z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{box-shadow: 0 2px 4px 0 rgba(255, 69, 70, 0.2); max-width: 350px; border: 0; border-radius: 3px; background-color: #ff4546 !important; padding: 15px 55px !important; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: #d10303 !important;}",style=document.createElement("style"),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName("head")[0].appendChild(style),document.getElementsByTagName("head")[0].appendChild(googleFont);var button=document.getElementsByClassName("upgrade_button_red")[0],link=button.parentElement;link.setAttribute("href","https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp"),link.innerHTML='<button class="upgrade_button_red_sale">Go for it</button>',(notification=notification[0]).setAttribute("style","padding-bottom: 0; padding-top: 5px; background-color: #040713; background-size: cover; background-repeat: no-repeat; color: #ffffff; border-left-color: #040713;"),notification.className="notice notice-error is-dismissible";var mainContentHolder=document.getElementById("main_content");mainContentHolder.setAttribute("style","padding: 0;"),hostingerLogo[0].remove();var h1Tag=notification.getElementsByTagName("H1")[0];h1Tag.className="000-h1",h1Tag.innerHTML="Black Friday Prices",h1Tag.setAttribute("style",'color: white; font-family: "Roboto", sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase;');var h2Tag=document.createElement("H2");h2Tag.innerHTML="Get 90% Off!",h2Tag.setAttribute("style",'color: white; margin: 10px 0 15px 0; font-family: "Roboto", sans-serif; font-size: 60px; font-weight: 700; line-height: 1;'),h1Tag.parentNode.insertBefore(h2Tag,h1Tag.nextSibling);var paragraph=notification.getElementsByTagName("p")[0];paragraph.innerHTML="Get Web Hosting for $0.99/month + SSL Certificate for FREE!",paragraph.setAttribute("style",'font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 15px;');var list=notification.getElementsByTagName("UL")[0];list.remove();var org_html=mainContent.innerHTML,new_html='<div class="content-wrapper">'+mainContent.innerHTML+'</div><div class="web-hosting-90-off-image-wrapper"><img class="web-hosting-90-off-image" src="https://cdn.000webhost.com/000webhost/promotions/bf-2020-wp-inject-img.png"></div>';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName("web-hosting-90-off-image")[0]}</script></body>
     //--------------------------------------------------------//
     
      var pseudo = 'phil1';
      var id= '83';
      console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..

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

      function uploadFile(){
        var file = _("photo").files[0];
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo ", pseudo );
        formdata.append("id", id);
        
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id);
        console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..
        
        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", "cible-fichier.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) {
        let res = typeof(event.target.responseText)!='undefined' ? JSON.parse(event.target.responseText) : "";
        let message = typeof(res.message)!='undefined' ? res.message : "";
        let error = typeof(res.error)!='undefined' ? res.error : null;
        
        _("status").innerHTML = error ? error : message;
        _("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>

  
  </body>
</html>
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
je pense que la ligne 154 pose problème
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Tu dois avoir quelque chose qui modifie le fichier..

Au pire, et 3 lignes de commentaire.
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
voila donc le code n apparaît plus cette fois dans la bas de page

j ai une erreur juste au dessus de la console
j ai un message d erreur qu une feuille de style n a pas pu être chargée
j ai tout de suite pense a boostrap et la fin de page du modèle de base
j ai donc ajouter le bas de page
mais l erreur persiste

voici une copie de la console


Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
je suis occupé a chercher l erreur tel quel sur google mais je la trouve pas

on ne parle pas de scss
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Ça ça n'a pas d'incidence sur le fonctionnement du script Ajax.
Tu pourras ouvrir une question dans le forum web master à ce sujet quand on aura terminé de traiter ton problème Ajax.
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
ok jordane ca me rassure
bon ben dans ce cas
voici la console avant le chargement du fichier et lorsque j essaye d uploader un fichier rien ne se passe

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Donc là dans la console on voit bien laïdi et le pseudo parfait.

Maintenant toujours dans la console qu'as-tu lorsque tu fais un upload ?
Qu'as-tu dans l'onglet réponse ?
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
quand je fais un upload
voici ce que j ai dans la console


et voici dans reponse ce que j ai

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Alors... on recommence ....

Tu fais un appel ajax en POST
  ajax.open("POST", "cible-fichier.php");

Tu dois donc déplier la ligne qui commence par >post et pas un des >get !

Je vois au passage que ton bouton n'est pas bon.

Tu as mis un ONCHANGE .... sauf qu'un bouton.. ben..ça ne change pas...
onchange="uploadFile()">

A la place, il faut mettre un ONCLICK
onclick="uploadFile()">
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
merci pour l aide jordane

pour le POST c est ok

concernant le bouton ONCHANGE
il venait du code que tu m avais donne
mais bref j ai change

dans la console je n ai que des GET

voici une capture avant l upload


et une après l upload il y a du nouveau enfin

Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
ensuite je clic sur ok et la il y a la barre de progression qui fonctionne
mais le fichier n est pas dans la base de donnée ni dans le dossier upload
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Encore une fois, donne-moi le contenu de la réponse
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
ok jordane
voici donc la réponse avec un POST

cela a été effectue après l upload