Récupérer une image avec AJAX. [Résolu]

Signaler
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
-
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
-
Bonjour , je suis entrain de développer un chat que je suis entrain de rendre dynamique grâce a AJAX mais je fais face a un gros mur :
L'envois de photo.

<form enctype="multipart/form-data" action="" id="load_img" method="post">
      <div class="card-footer">
     
       <div class="input-group">
        <div class="input-group-append"> 
         <span id="send_img_btn" class="input-group-text attach_btn">
          <i class="fas">
                 
                   
              <fieldset>
                   <p>
                      <label class="fas fa-paperclip" for="fichier_a_uploader" title=""></label>
                      <input type="hidden" name="MAX_FILE_SIZE" value="500000" />
                      <input name="fichier" type="file" style="display:none" id="fichier_a_uploader" />
                      
                    </p>
               </fieldset>
             
       
          </i>
          

         </span> 
         <span id="send_emoji_btn" class="input-group-text attach_btn">
         <i id="load_emoji_frame" class="fas">
                 
                   
              <button id="load_emoji_frame">smyle</button>
             
       
          </i>
          
          </span> 

        </div>
        
      
        
        <textarea name="msg_txt" id="areatxt" class="form-control type_msg" placeholder="Type your message..."></textarea>
        <div class="input-group-append">

         <button type="submit" name="submit" id="bouton" data-id_customer="<?php if($suplierUser){echo($idCurentUser);}else{echo($idCurentLog);}  ?> " data-id_supplier="<?php if($suplierUser){echo($idCurentLog);}else{echo($idCurentUser);}  ?>" data-type_user="<?php if($suplierUser){echo("customer");}else{echo("supplier");} ?>" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
        </div>
        
       </div>
      
      </div>
      </form>


J'ai donc un formulaire qui se submit avec le bouton tout en bas de mon code. Voici mon code JS :

    $("#load_img").submit(function () {

        var donneesFormulaire = new FormData($("#load_img").get(0));

        console.log(donneesFormulaire);
   var id_customer = $('#bouton').attr('data-id_customer');
  var id_sup = $('#bouton').attr('data-id_supplier');
   var type_user = $('#bouton').attr('data-type_user');
   var msg = $('#areatxt').val();
   alert("une pause");
        $.ajax({
            url: '../php/majChat.php',     
            data: 'msgtxt=' + msg + '&id_customer=' + id_customer +"&type_user=" + type_user + '&id_sup=' + id_sup + '&form_file=' + donneesFormulaire,
            type: 'POST',

            success:
                    function (donnees, status, xhr) {
                        alert(donnees);
                    },
            error:
                    function (xhr, status, error) {
                        alert("param : " + xhr.responseText);
                        alert("status : " + status);
                        alert("error : " + error);
 
                    }
        });
 
    });


Mon formulaire arrive a bon bord sous la forme d'un objet Form Data, le problème c'est que je ne sais absolument pas comment le traiter en php et de plus je pense qu'il est vide mais je n'arrive pas a comprendre pourquoi.
Toute mes recherche sur internet n’aboutissent a rien car une personne va dire que l'envois de fichier par ajax est impossible sans frame caché ou je sais quoi d'autre alors que l'API form data dit le contraire sans préciser comment traiter le formulaire en PHP.

L'idéal pour moi serai de pouvoir avoir accées a $_FILES comme je le faisais avant ma tentative de dynamiser l'envois de photo.

Je suis completement perdu et j'avoue qu'un peu d'aide ne me ferrai pas de mal.
Merci d'avance et bonne fin de journée.

3 réponses

Messages postés
16
Date d'inscription
mercredi 18 septembre 2019
Statut
Membre
Dernière intervention
18 juillet 2020
1
Salut,

essaie ça:
 $("#form").on('submit', ((e) =>  {
   e.preventDefault();
   $.ajax({
     url: "tonFichier.php",
     type: "POST",
     data:  new FormData(this),
     contentType: false,
     cache: false,
     processData:false,
     success: function(data)
     {
     },          
   });
 }));



Et je te conseille de remplacer tout tes var par des let et d'aller voir la différence entre les deux. Ça pourras t'éviter de mauvaise surprise :)
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020

Bonjour et merci pour cette réponse. En effet ça fonctionne bien mais je récupère toujours un objet de type form_data que je ne sais pas gérer en PHP.
echo($_FILES['fichier']['name']); // Marche pas
$file_name=($_POST['form_file']['fichier']['nom']); // Marche pas

Enfin bref je voulais te montrer des exemples de tentative pour que mieux formuler ma question.
Merci d'avance et bonne journée !
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020

C'est bon j'ai trouver !!
Si ca peux intéresser quelqu'un je me suis servis de
https://www.it-swarm.dev/fr/javascript/jquery-ajax-upload-de-fichier-php/1047631793/
Et du :
data:  new FormData(this),

Que m'a donné Roipirau ci dessus.