Ajout d une barre de progression sur l upload des images

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

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>

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

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

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

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

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

ah mince nos message ce sont croise
mais je ne vois rien de ton image c est trop petit jordane

desole j ai eu une panne de réseau
voici donc l image

un grand merci pour ton aide jordane

je pense que tu veux voir ceci

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é

donc mon id n'est pas encore bonne ?

merci jordane
je reviens plus tard
car j ai mis le bordel dans mon code

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>

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

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>

ok jordane
as tu un lien ou une petite explication pour moi y parvenir

je pense que c est ceci

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

Merci pour ton aide Jordane et donc je dois m y prendre comment ...