如何使用 JQuery 和 formData 正確獲取表單數據

Question

我正在嘗試使用 ajax 和 php 上傳一些表單數據，但由於某種原因，我的數據沒有被捕獲或傳遞。

這是我所擁有的：

form.html（帶有 3 個文本輸入和 1 個文件的基本表單）

<form class="form" id="superform" action="nada.php" method="post" enctype="multipart/form-data">
          <div class="form-group">
              <label for="tituloQuiz">Resultado:</label>
              <input type="text" class="form-control resultado" id="titulo" name="titulo" placeholder="Ex: Paris">
          </div>

          <div class="form-group">
              <label for="desc">Descrição do Site:</label>
              <textarea  class="form-control" id="desc" name="descricao" placeholder="Ex:"></textarea>
          </div>

          <div class="form-group">
              <label for="desc">OG FB DESC:</label>
              <textarea  class="form-control" id="facedes" name="descricao" placeholder="facebook description"></textarea>
          </div>

          <div class="form-group">
            <label for="imggrande">Imagem</label>
            <input type="file" id="imggrande" name="imgres">
            <p class="help-block">Imagem usada na página de resultado e Facebook 600 x 400.</p>
          </div>
          <button type="button" class="btn btn-primary btn-lg addres">Adicionar Resultado</button>
          <button type="button" class="btn btn-danger btn-lg">Próxima Etapa</button>
       </form>

這是進行ajax調用的JS： myjs.js

 $("document").ready(function(){
     $('.row').on('click','.addres',function(){
         console.log('Click Detectado');
         var formulario = $('#superform');
         var formData = new FormData(formulario);

          $.ajax({

                  type: "POST",
                  url: "addres.php",
                  data: formData,
                  async: false,
                  success: function(data) {
                        console.log('Funcionou');
                  },
                  error: function(data) {
                      console.log('Erro no formulario');
                  },
                  cache: false,
                  contetType: false,
                  processData: false
          });


     });
 });

什么都沒有傳遞，POST 調用是空的（見下面的截圖）。

**addres.php**
<?php
   var_dump($_FILES);
   var_dump($_POST);

?>

Answer 1

 $.ajax({
    url: 'address.php', 
    type: 'POST',
    data: new FormData($('#superform')[0]), // The form with the file    inputs.
    processData: false,                          // Using FormData, no need to process data.
    contentType:false
  }).done(function(){
     console.log("Success: Files sent!");
  }).fail(function(){
     console.log("An error occurred, the files couldn't be sent!");
});

當將 contentType 選項設置為 false 時，它​​會強制 jQuery 不添加 Content-Type 標頭，否則，將丟失邊界字符串。 此外，當通過多部分/表單提交文件時，必須將 processData 標志設置為 false，否則，jQuery 會嘗試將您的 FormData 轉換為字符串，這將失敗。

使用從 php 讀取

 $_FILES['file-0']

（只有一個文件 file-0，除非您在文件輸入中指定了 multiple 屬性，在這種情況下，數字將隨每個文件遞增。）

附加信息：親自查看使用 console.log() 將 formData 傳遞到 php 頁面的方式的不同。

    var formData = new FormData($('#superform')[0]);
    console.log(formData);

    var formDataSerialized = $('#superform').serialize();
    console.log(formDataSerialized);

希望這可以幫助。

額外信息異步讀取此上傳文件

注意：formData 在 IE 9 中不起作用

Answer 2

您可以使用 .serializeArray() 以數組格式獲取數據，然后將其轉換為對象。 像這樣：

    function getFormData(formId) {
       let formData = {};
       let inputs = $('#'+formId).serializeArray();
       $.each(inputs, function (i, input) {
          formData[input.name] = input.value;
      });
      return formData;
   }