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 可解决问题。

当我使用 google jquery/ajax multipart/form-data 提交时，top hit 至少主要包括 'contentType:false'。请问有人可以向我解释原因吗？

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajax http://hayageek.com/jquery-ajax-form-submit/ Sending multipart/formdata with jQuery.ajax

jquery API 文档说： contentType（默认值：'application/x-www-form-urlencoded; charset=UTF-8'） 类型：字符串 向服务器发送数据时，使用此内容类型。

为什么我们需要将它设置为 false 来提交多部分/表单数据？ 什么时候需要 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

请设置您的表单action属性如下，它将解决您的问题。

<form name="addProductForm" id="addProductForm" action="javascript:;" enctype="multipart/form-data" method="post" accept-charset="utf-8">

jQuery 代码：

$(document).ready(function () {
    $("#addProductForm").submit(function (event) {

        //disable the default form submission
        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 () {
                alert('Form Submitted!');
            },
            error: function(){
                alert("error in ajax form submission");
            }
        });

        return false;
    });
});

Answer 2

false 的contentType 选项用于传递文件的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]);

使用console.log()，亲眼看看你的formData是如何传递到你的php页面的。

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

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