Problème d'envoi d'un formulaire avec composante file en jquery par ajax

Signaler
Messages postés
57
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
14 janvier 2020
-
csi_bern
Messages postés
57
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
14 janvier 2020
-
Bonjour,

Ca fait déjà plusieurs jours que je bloque sur ce problème. Mon but est de créer un formulaire permettant d'envoyer une image au server en passant par Ajax via jQuery.

Je suis passé par plusieurs tutoriel (notamment ceux-ci: https://www.codexworld.com/ajax-file-upload-with-form-data-jquery-php-mysql/ et https://diawdi.net/upload-de-fichier-grace-a-un-formulaire/) mais rien ne marche.

Voici le code de la page d'envoi :

<form id="sendProfileImg" ENCTYPE="multipart/form-data">
<label for="profileImgFile">Choisir une image</label>
<input id="profileImgFile" name="profileImgFile" type="file"><br>
<input id="profileId" name="profileId" type="hidden" value="101"><br>
<input type="submit" value="enregistrer l'image">
<img id="picturePreview" src="../img/xxx/101.jpg" width="200px"/>
<div id="response"></div>
</form>


et

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
function readURL(input) {
 if (input.files && input.files[0]) {
  var reader = new FileReader();

  reader.onload = function(e) {
   $('#picturePreview').attr('src', e.target.result);
  }

  reader.readAsDataURL(input.files[0]);
 }
}

$(document).ready(function(e){
$("#profileImgFile").change(function() {
  readURL(this);
});

 $( "#sendProfileImg").on('submit', function(e) {
  e.preventDefault();
  $.ajax({
   url: 'php/uploadImage.php',
   data: new FormData(this),
  }).done(function( data ) {
   //alert(data);
   $("#response").html(data);
  });
 });
});
</script>


J'ai essayé plusieurs variantes, la présente, avec la fonction jQuery Post, avec une autre $(this).serialize() ou encore en envoyant les données "manuellement" par un $('#profileImgFile').get(0).files. Mais rien ne marche. Soit j'obtiens des variables $_POST vides, soit j'ai une erreur Javascript:
Uncaught TypeError: Illegal invocation
at add (jquery-3.4.1.js:8685)
at buildParams (jquery-3.4.1.js:8672)
at Function.jQuery.param (jquery-3.4.1.js:8709)
at Function.ajax (jquery-3.4.1.js:9301)
at HTMLFormElement.<anonymous> (test.htm:53)
at HTMLFormElement.dispatch (jquery-3.4.1.js:5237)
at HTMLFormElement.elemData.handle (jquery-3.4.1.js:5044)

La ligne 53 représente : $.ajax({

Merci d'avance pour votre aide.

Bonne soirée
Configuration: Windows / Chrome 79.0.3945.88

1 réponse

Messages postés
57
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
14 janvier 2020
2