Ajout d une barre de progression sur l upload des images

<?php
// Démarrage SESSION
session_start();

//Connexion à la bdd
require_once 'base.php';

// Variables/constantes...
  $allowed = array(
            "jpg" => "image/jpg",
            "JPG" => "image/JPG",
            "jpeg" => "image/jpeg",
            "JPEG" => "image/JPEG",
            "gif" => "image/gif",
            "png" => "image/png",
            "PNG" => "image/PNG"
        );

$res = array();// variable qui contiendra les infos à retourner au script JS
        
// récupération PROPRE des variables de type "array" AVANT de les utiliser  (j'ai l'impression de radoter vu le nombre de fois que je t'ai déjà donné ce genre de code !!!! )
$getpseudo = !empty($_COOKIE['pseudo']) ? $_COOKIE['pseudo'] : NULL;
$pseudo = !empty($_POST['pseudo']) ? $_POST['pseudo']: $getpseudo;
$id = !empty($_POST['id']) ? $_POST['id']: NULL;
$photos = !empty($_FILES["photo"]) ? $_FILES["photo"] : NULL;    


// Vérifier si le formulaire a été soumis
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Vérifie si le fichier a été uploadé sans erreur.
   
    if ($photos ){
      if( $photos["error"] != 0 ){
        $err = 'Erreur : ' . $photo['error']; 
      }else{
        $filename = $photos["name"];
        $filetype = $photos["type"];
        $filesize = $photos["size"];
        // Vérifie l'extension du fichier
        $ext = pathinfo($filename, PATHINFO_EXTENSION);
        if (!array_key_exists($ext, $allowed)) {
          $err = 'Erreur : Veuillez sélectionner un format de fichier valide.</br> <a href="javascript:history.back()">Pour recommencer</a>';
        }
        // Vérifie la taille du fichier - 5Mo maximum
        $maxsize = 5 * 1024 * 1024;
        if ($filesize > $maxsize){
            $err = 'Error: La taille du fichier est supérieure à la limite autorisée.</br> <a href="javascript:history.back()">Pour recommencer</a>';
        }else{
          // Vérifie le type MIME du fichier
          if (in_array($filetype, $allowed)) {
              // Vérifie si le fichier existe avant de le télécharger.
              if (file_exists("uploads/" . $photos["name"])) {
                  $err =  $photos["name"] . ' existe déjà.</br> <a href="javascript:history.back()">Pour recommencer</a>';
              } else {
                if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $photos["name"])){
                  $err = "Erreur lors de l'upload du fichier";
                }else{
                  $res['message'] = '<style="font-size:22px; margin-left:20%; margin-top:90px;text-align: center;">Votre fichier a été téléchargé avec succès.>';
                  
                  //préparation de la requête et des variables
                  $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)';
                  $datas = array(
                      ':pseudo' => $pseudo,
                      ':id_img' => $id,
                      ':nom_img' => $filename,
                      ':nom_min' => $filename
                  );
                  //exécution de la requêete préparée
                  try{
                    $req = $bdd->prepare($sql);
                    $req->execute($datas);
                  }catch(Exception $e){
                    $err = " Erreur dans la requête : " . $e->getMessage();
                  }
                }
              }
          } else {
            $err = 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.</br> <a href="javascript:history.back()">Pour recommencer</a>';
          }
        }
      }
    } else  {
      $debug = ['POST'=>$_POST,'FILE'=>$_FILES];
      $err =  "Error: " . $photos["error"] . "   ---  " . print_r($debug,true);
    } 
  } else {
    $err = "Méthode invalide"; 
  }
  
  $res['error'] = $err;
  
  // On renvoi la réponse au format JSON
  echo json_encode($res);
 exit;

$contenu = !empty($_FILES["contenu"]) ? $_FILES["contenu"] : NULL;  

//préparation de la requête et des variables
                  $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min, contenu ) VALUES (:pseudo, :id_img, :nom_img, :nom_min, :contenu)';
                  $datas = array(
                      ':pseudo' => $pseudo,
                      ':id_img' => $id,
                      ':nom_img' => $filename,
                      ':nom_min' => $filename
					  ':contenu ' => $contenu
                  );

 <div class="form-group">
                     <label for="contenu">Le message</label>
                     <textarea name="contenu"class="form-control" id="contenu" rows="3" placeholder="Message..." ></textarea>
                  </div>

   $datas = array(
                      ':pseudo' => $pseudo,
                      ':id_img' => $id,
                      ':nom_img' => $filename,
                      ':nom_min' => $filename,
					  ':contenu' => $contenu
                  );

$contenu = !empty($_FILES["contenu"]) ? $_FILES["contenu"] : NULL;

var contenu = _("contenu").contenu[0];

<script >
     //--------------------------------------------------------//     
     
     //--------------------------------------------------------//
     
      var pseudo = '<?php echo $pseudo;?>';
      var id= '<?php echo $id ;?>';
   //var contenu = '<?php echo $contenu ;?>';
      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);
        formdata.append("contenu", contenu);
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id+ '  contenu: ' + contenu);
        console.log('ID',id,'PSEUDO',pseudo,'CONTENU',contenu); // 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>

      function uploadFile(){
        var file = _("photo").files[0];
		var contenu = _("contenu").contenu[0];
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo", pseudo );
        formdata.append("id", id);
        formdata.append("contenu", contenu);
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id+ '  contenu: ' + contenu);
        console.log('ID',id,'PSEUDO',pseudo,'CONTENU',contenu); // pour voir si les variables se remplissent bien dans la console;..

   console.log('ID',id,'PSEUDO',pseudo,'CONTENU',contenu); // pour voir si les variables se remplissent bien dans la console;..

 var file = _("photo").files[0];
		var contenu = _("contenu").contenu;
		var contenu = '<?php echo $contenu ;?>';
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo", pseudo );
        formdata.append("id", id);
        formdata.append("contenu", contenu);

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