Jquery/Ajax表单提交（enctype=“多部分/表单数据”）。为什么“contentType:False”会导致PHP中未定义索引？

提问者：小点点

Jquery/Ajax表单提交（enctype=“多部分/表单数据”）。为什么“contentType:False”会导致PHP中未定义索引？

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

当使用表单html中的操作引用脚本时，php工作正常。

下面的jquery似乎可以正确检索表单数据，因为警告行显示：productName=Test Name

jquery success函数打印到my HTML的返回数据是一个php错误，显示为：Undefined index:productName

删除contentType:false修复了该问题。

当我在google jquery/ajax multipart/form data submission中搜索时，最热门的内容至少包括“contentType:false”。谁能给我解释一下原因吗？

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajaxhttp://hayageek.com/jquery-ajax-form-submit/发送多部分/formdata与jQuery.ajax

jQuery API留档表示：contentType（默认：'Application/x-ww-form-urlencoded； charset=UTF-8'）Type： 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;
  });

共2个答案

匿名用户

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

当将contentType选项设置为false时，将强制jQuery不添加内容类型头，否则，它将丢失边界字符串。另外，当通过多部分/表单数据提交文件时，必须将processData标志设置为false，否则jQuery将尝试将表单数据转换为字符串，这将失败。

使用jQuery的.序列化（）方法，该方法以标准的URL编码表示法创建文本字符串。

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

尝试使用newformdata而不是。序列化（）：

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

通过使用控制台，您自己可以看到formData如何传递到php页面的差异。log（）。

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

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

匿名用户

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

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