Jquery/Ajax Form Submit （enctype=“multipart/form-data” ）。为什么'contentType：False'会导致PHP中未定义的索引？

php jquery ajax forms

2022-08-30 13:20:52

我一直在尝试提交一个带有enctype=“multipart/form-data”的表单。我有此设置，因为一旦我弄清楚了文本输入的ajax提交，表单将涉及jpeg / png上传。

当使用表单html中的操作引用脚本时，php工作正常。
表单数据似乎被下面的jquery正确检索，因为警报行显示：productName=Test+Name&productDescription=Test+Description&OtherProductDetails=
jquery 成功函数打印到我的 HTML 的返回数据是一个 php 错误，说：未定义的索引：产品名称
删除内容类型：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 发送多部分/表单数据

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

为什么我们需要将其设置为 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;
  });

答案 1

contentType选项 to 用于传递文件的表单。falsemultipart/form-data

当将选项设置为时，它将强制 jQuery 不添加 Content-Type 标头，否则，其中将缺少边界字符串。此外，当通过多部分/表单数据提交文件时，必须将标志设置为false，否则，jQuery将尝试将FormData转换为字符串，这将失败。contentTypefalseprocessData

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

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

使用时，需要传递未编码的数据。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);

答案 2

请按如下方式设置表单操作属性，它将解决您的问题。

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

jQuery code：

$(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;
    });
});