使用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;
});

谢谢！