Ajout d une barre de progression sur l upload des images

<input type="submit" name="submit" value="Upload">

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

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";
}

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

   <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 ...";}

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

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

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";
}

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

 ajax.addEventListener("abort", abortHandler, false);

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

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

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

 <input type="file" name="file1" id="file1" onchange="uploadFile()"><br>

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

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