Afficher gif pendant chargement de la page

Sujet résolu

flexi2202

27 mai 2021 à 0:44:37

bonjour a tous

je souhaiterais afficher un message ou n importe quoi pendant l upload d un fichier

je viens de trouver cet ancien sujet

https://openclassrooms.com/forum/sujet/afficher-gif-pendant-chargement-de-la-page-1

cela fonctionne mais après l upload je ne suis pas redirige vers cible-fichier.php

qui pourrait m aider

j ai donc fait comme ceci

function display_loader()
{
     document.getElementById('loader').innerHTML = "<img src='loader.gif' alt='load'/><br/>Loading, please wait ...";

<form action="cible-fichier.php" method="post" enctype="multipart/form-data">
   <div class="form-group">
        <label for="fileUpload">Fichier:</label>


        <input type="file" name="photo" id="fileUpload" required>
        <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>
           <div id="loader">
</div>
    </form>

-
Edité par flexi2202 27 mai 2021 à 7:59:26

Arthur222

27 mai 2021 à 18:47:56

Salut,

tu pourrais utiliser ajax, envoyer ton fichier et tes données de formulaire à un fichier php, enregistrer l'image etc. dans le php et renvoyer un réponse au js en lui disant si tout a fonctionné avec echo "ok" ou echo "erreur : "+tonErreur;

Par exemple en faisant comme ça : tu charges jquery pour utiliser leur méthode $.ajax :

<head>
...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

tu mets un button dans le html au lieu d'un submit pour éviter d'avoir à annuler l'event submit automatique :

<form id="f" action="#" method="post">
...
  <input type="button" id="valider" value="valider">
</form>

et tu ajoutes l'appel ajax :

<script>
let form = document.getElementById("f");
let valider = document.getElementById("valider");
valider.addEventListener("click", (e) => {
    $.ajax({
      type:"POST", url:"tonFichier.php",
      data: new FormData(form), //toutes les données de ton formulaire
      success:(data) => { //le retour du php est reçu dans la variable qu'on a appelé "data"
        alert("data:"+data)
      }, error: (err) => {
        alert("err:"+err)
      }
    });
});
</script>

pour savoir ce que tu reçois en php, tu peux faire ça dans tonFichier.php :

<?php
print_r($_POST);//il faudra faire echo "ok"; à la fin de ce fichier pour renvoyer le "ok" au js, qui le recevra dans le paramètre "data" de success:(data)...
?>

-
Edité par Arthur222 29 mai 2021 à 8:57:57

flexi2202

4 juin 2021 à 1:08:09

bonjour arthur

un tout très grand merci pour ce code

cela m a donnez suffisamment d idées pour continuer

encore merci

AbcAbc6

4 juin 2021 à 2:11:34

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e