如何使用 JQuery 和 formData 正确获取表单数据

Posted 2023-05-08

【中文标题】如何使用 JQuery 和 formData 正确获取表单数据

【英文标题】：How to properly get form data with JQuery and formData

【发布时间】：2015-05-25 14:06:39

【问题描述】：

我正在尝试使用 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);

?>

【参考方案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 标头，否则将缺少边界字符串。此外，当通过 multi-part/form 提交文件时，必须将 processData 标志设置为 false，否则 jQuery 会尝试将您的 FormData 转换为字符串，这将失败。

使用从 php 读取

 $_FILES['file-0']

（只有一个文件，file-0，除非您在文件输入中指定了多个属性，在这种情况下，数字将随着每个文件递增。）

其他信息： 使用 console.log() 亲自查看 formData 如何传​​递到 php 页面的不同之处。

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

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

希望这会有所帮助。

更多信息请阅读此upload files asynchronously

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

【讨论】：

感谢iceburg，现在正在传递数据，但$_FILES 为空。关于我如何在 php 端访问数据的任何信息，通常我会使用 $_POST['titulo'] 例如，但这不起作用。

你得到文件名了吗？尝试编辑版本。

是的，但是在 var_dump($_POST);

@Iceburg：你确定contentType:false 是个好主意吗？根据文档，它使 jQuery 根本不发送 Content-Type 标头，但文件上传需要 multipart/form-data。

@CBroe contentType 选项为 false 用于传递文件的多部分/表单数据表单。当将 contentType 选项设置为 false 时，它​​会强制 jQuery 不添加 Content-Type 标头，否则将缺少边界字符串。此外，当通过多部分/表单提交文件时，必须将 processData 标志设置为 false，否则，jQuery 将尝试将您的 FormData 转换为字符串，这将失败。根据***.com/questions/20795449/…

【参考方案2】：

您可以使用 .serializeArray() 获取数组格式的数据，然后将其转换为对象。像这样：

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