Formulaire upload en Ajax et PHP avec JQuery Steps

Fermé
aureb09 Messages postés 34 Date d'inscription mardi 29 décembre 2015 Statut Membre Dernière intervention 22 novembre 2021 - Modifié le 27 juil. 2020 à 19:15
Bonjour à tous,

J'ai construit un formulaire par étape avec JQuery Steps qui fonctionne. Je souhaite passer par Ajax pour la validation des données avec FormData() et qui est renvoyé vers un script PHP. Seulement voilà, les données des input text sont bien transmises au fichier PHP mais l'upload du fichier ne fonctionne pas (comme si PHP ne recevais pas les bonnes infos pour)...

HTML :
<form enctype="multipart/form-data" method="post" id="form_devis">
   <div id="devis_steps">
    <h3>Fichier</h3>
    <section>
      <form>
       <input type="file" class="form-control" id="file" name="file" />
      </form>
    </section>

    <h3>Coordonnées</h3>
    <section>
      <form>
       <h4>Coordonnées</h4>

        <input id="nom" name="nom" type="text" required >
        <label for="nom">Nom *</label>

        <input id="prenom" name="prenom" required>
        <label for="prenom">Prénom *</label>

        <input id="email" name="email" type="email" required placeholder="Votre email">
        <label for="email">Email *</label>
      </form>
    </section>
   </div>
  </form>



JS :

$('#devis_steps').steps({
  headerTag: "h3",
  bodyTag: "section",
  transitionEffect: "slideLeft",
  onStepChanging: function (event, currentIndex, newIndex)
  {
    if (newIndex<currentIndex){
   return true;
    }
    var form=$('.body.current form');     
    if (form.length==1){
   form.validate().settings.ignore = ":disabled,:hidden";
   return form.valid();
    }
    return true;
  },
  onFinishing: function (event, currentIndex)
  {

    var form=$('.body.current form');     
    if (form.length==1){
   form.validate().settings.ignore = ":disabled";
   return form.valid();
    }
    return true;
  },
  onFinished: function (event, currentIndex)
  {

   //Captcha
    //var captcha = grecaptcha.getResponse();
    
    var form = $('#form_devis')[0];
    var formData = new FormData(form);
    
    $.ajax({
     type: 'POST',
     url: 'send.php',
     data: formData,
     dataType: 'json',
     contentType: false,
     cache: false,
     processData:false,
     beforeSend: function(){
      $('#form_devis').css("opacity",".5");
     },
     success: function(response){ //console.log(response);
      $('.statusMsg').html('');
      if(response.status == 1){
       $('#form_devis')[0].reset();
       $('.statusMsg').html('<p class="alert alert-success">'+response.message+'</p>');
      }else{
       $('.statusMsg').html('<p class="alert alert-danger">'+response.message+'</p>');
      }
      $('#form_devis').css("opacity","");
      $("#form_devis a").removeAttr("disabled");
     }
    });
  }
 });

 // File type validation
 $("#file").change(function(){
  var file = this.files[0];
  var fileType = file.type;
  var match = ['application/pdf', 'application/msword', 'application/vnd.ms-office', 'image/jpeg', 'image/png', 'image/jpg'];
  if(!((fileType == match[0]) || (fileType == match[1]) || (fileType == match[2]) || (fileType == match[3]) || (fileType == match[4]) || (fileType == match[5]))){
   alert('Sorry, only PDF, DOC, JPG, JPEG, & PNG files are allowed to upload.');
   $("#file").val('');
   return false;
  }
 });



Et le fichier send.php :

if(isset($_FILES['file']['name']) AND isset($_POST['email'])){
 $sourcePath = $_FILES['file']['tmp_name'];
 $targetPath = "upload/".$_FILES['file']['name'];
 move_uploaded_file($sourcePath,$targetPath);

$message = 'Nouveau fichier : '.$_POST['nom'].' '.$_POST['prenom'].' <br />
        '.$_POST['email'];
   
  

$headers  = 'From: Site Web <support@siteweb.fr>' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail("destinataire@mail.fr", 'Nouveau fichier', $message, $headers);

}




Le mail est bien envoyé mais aucun fichier dans le dossier upload (qui existe bien).

Merci d'avance de votre aide !