Ajout d une barre de progression sur l upload des images

<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>

<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>

 action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"

<input type="button"

 <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>

<?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>

<!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>