jQuery / Ajax表单提交（enctype =“ multipart / form- data”）。为什么'contentType：False'在PHP中导致未定义的索引？

Question

我一直在尝试使用enctype =“ multipart / form-
data”提交表单。我有此设置，因为一旦我确定了用于文本输入的Ajax提交，表单将涉及jpeg / png上传。

1. 当使用html形式的动作引用脚本时，php可以正常工作。

2. 下方的jquery似乎正确检索了表单数据，因为警报行显示：productName = Test + Name＆productDescription = Test + Description＆OtherProductDetails =

3. 通过jquery成功函数打印到我的HTML的返回数据是php错误，内容为：未定义索引：productName

4. 删除contentType：false可解决此问题。

当我用谷歌jquery / ajax multipart / form-
data提交时，命中至少主要包括’contentType：false’。请有人可以向我解释原因吗？

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajax
http://hayageek.com/jquery-ajax-form-submit/
使用jQuery.ajax发送multipart /
formdata

jQuery API文档说：contentType（默认值：’application / x-www-form-urlencoded; charset =
UTF-8’）类型：String将数据发送到服务器时，请使用此内容类型。

为什么要提交多部分/表单数据，我们需要将其设置为false？什么时候才需要设置错误的设置？

jQuery：

  $("#addProductForm").submit(function (event) {
      event.preventDefault();
      //grab all form data  
      var formData = $(this).serialize();

      $.ajax({
          url: 'addProduct.php',
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
              $("#productFormOutput").html(returndata);
              alert(formData);
          },
          error: function () {
              alert("error in ajax form submission");
          }
      });

      return false;
  });

Answer 1

contentTypeoption选项false用于multipart/form-data传递文件的表单。

当将contentType选项设置为时false，它将强制jQuery不添加Content-
Type标头，否则，边界字符串将丢失。另外，通过multipart / form-
data提交文件时，必须将processData标志设置为false，否则jQuery将尝试将FormData转换为字符串，这将失败。

要尝试解决您的问题，请执行以下操作：

使用jQuery的.serialize()方法以标准的URL编码表示法创建文本字符串。

使用时，您需要传递未编码的数据contentType: false。

尝试使用new FormData代替.serialize():

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

亲自了解使用，将formData传递到php页面的区别console.log()。

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

  var formDataSerialized = $(this).serialize();
  console.log(formDataSerialized);