Отправить форму с вводом файла с помощью Ajax

Question

Я хочу, чтобы отправить форму с помощью AJAX, но форма содержит входной файл есть моя форма:

<form name="form" id="form" method="post" enctype="multipart/form-data"> 
       <div class="form-group"> 
       <label for="libelle" >Libellé :</label> 
       <input type="text" name="libelle" class="form-control" id="libelle"> 
       </div> 
       <div class="form-group"> 
       <label for="libelle" >Photo :</label> 
       <input type="file" name="photo" class="form-control" id="photo"> 
       </div> 
       <div class="form-group"> 
       <label for="description">Déscription :</label> 
       <input type="text" name="description" class="form-control" id="description"> 
       </div> 
       <div class="form-group"> 
       <label for="libelle" >Prix Unitaire :</label> 
       <input type="text" name="prix_unitaire" class="form-control" id="prix_unitaire"> 
       </div> 
       <div class="form-group"> 
        <label for="sel1">Catégorie :</label> 
        <select class="form-control" id="categorie_id" name="categorie_id"> 

        <option value="1">1</option> 

        </select> 
       </div> 
       <input type="hidden" name="produit_id" class="form-control" id="produit_id"> 
      </form> 

я читал, что я должен использовать: var data = new FormData(jQuery('form')[1]); как можно я посылаю все формы с другим вводом в серию? Мой JQuery код:

return $.ajax({ 
       type: "GET", 
       url: "/admin/addProduit", 
       cache: false, 
       data: $('form').serialize() , 
       success: function(data) { 
        console.log(data); 
       }, 
       error: function(response) { 
        console.log('error'); 
       } 
       }); 

Answer 1

Вы должны сделать, как это и обновить свой код в соответствии с вашими требованиями:

PHP и HTML

<?php 
    print_r($_POST); 
    print_r($_FILES); 
?> 

<form id="data" method="post" enctype="multipart/form-data"> 
    <input type="text" name="field1" value="val 1" /> 
    <input type="text" name="field2" value="val 2" /> 
    <input type="text" name="field3" value="val 3" /> 
    <input name="image" type="file" /> 
    <button>Submit</button> 
</form> 

Jquery

$("form#data").submit(function(){ 

    var formData = new FormData($(this)[0]); 

    $.ajax({ 
     url: window.location.pathname, 
     type: 'POST', 
     data: formData, 
     async: false, 
     success: function (data) { 
      alert(data) 
     }, 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 

    return false; 
}); 

Спасибо!