jQuery的/ Ajax的表单提交（ENCTYPE =＆QUOT;的multipart / form-data的＆QUOT;）。为什么'的contentType：假“在PHP导致未定义的指数？ [英] Jquery/Ajax Form Submission (enctype="multipart/form-data" ). Why does 'contentType:False' cause undefined index in PHP?

问题描述

我一直在试图提交与ENCTYPE =多部分/表单数据的一种形式。我有这样的设置，因为形式将涉及JPEG / PNG上传一次，我想通了阿贾克斯提交的文本输入。

1. 在HTML表单中使用的动作引用脚本时PHP的正常工作。

2. 表单数据似乎是由下面的jQuery正确检索由于警戒线显示：产品名称=测试+姓名和放大器;产品描述=测试+说明和放大器; OtherProductDetails =

3. 打印到我的HTML的jQuery的成功，函数返回的数据是一个PHP错误说：未定义指数：产品名称

4. 删除的contentType：错误修复这个问题。

当我谷歌的jQuery / AJAX的multipart / form-data的提交，排名靠前，至少主要包括'的contentType：假。请有人能解释的理由我吗？

http://digipiph.com/blog/submitting- multipartform数据 - 使用 - 的jQuery和阿贾克斯 http://hayageek.com/jquery-ajax-form-submit/ <一href="http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax">Sending多重/ FORMDATA与jQuery.ajax

jQuery的API文档说： contentType中（默认：应用程序/ x-WWW的形式urlen codeD;字符集= UTF-8） 类型：String 当发送数据到服务器，使用这种内容类型。

为什么我们需要将其设置为false多部分/表单数据提交？ 当将假的设置需要呢？

jQuery的：

  $（＃addProductForm）。递交（函数（事件）{
      。事件preventDefault（）;
      //取得所有的表单数据
      VAR FORMDATA = $（本）.serialize（）;

      $阿贾克斯（{
          网址：addProduct.php，
          键入：POST，
          数据：FORMDATA，
          异步：假的，
          缓存：假的，
          的contentType：假的，
          过程数据：假的，
          成功：函数（returndata）{
              $（＃productFormOutput）HTML（returndata）。
              警报（FORMDATA）;
          }，
          错误：函数（）{
              警报（错误AJAX表单提交）;
          }
      }）;

      返回false;
  }）;
 

解决方案

的contentType选项设置为false用于那些通过文件的multipart / form-data的形式

。

当设置的contentType选项设置为false，它迫使jQuery的不添加一个Content-Type头，否则，边界线会从它丢失。此外，通过多部分提交文件时/形成一个必须离开过程数据标志设置为false，否则，jQuery将尝试将您FORMDATA转换为字符串，它就会失败。

要尝试解决您的问题：

您正在使用jQuery的.serialize（）方法创建标准的URL恩codeD符号的文本字符串。

您需要传递未连接codeD数据时使用的contentType：假

。

尝试使用新FORMDATA，而不是.serialize（）：

  VAR FORMDATA =新FORMDATA（$（本）[0]）;
 

使用的console.log（）看到自己的你FORMDATA是如何传递给你的PHP页面的区别。

  VAR FORMDATA =新FORMDATA（$（本）[0]）;
  执行console.log（FORMDATA）;

  VAR formDataSerialized = $（本）.serialize（）;
  执行console.log（formDataSerialized）;
 

I have been trying to submit a form with enctype="multipart/form-data". I have this setting because the form will involve jpeg/png uploads once I have figured out the ajax submission for text inputs.

1. the php works fine when referencing the script using action within the form html.

2. the form data seems to be retrieved correctly by the below jquery because the alert line shows: productName=Test+Name&productDescription=Test+Description&OtherProductDetails=

3. the returned data printed to my HTML by the jquery success function is a php error saying:Undefined index: productName

4. removing contentType:false fixes the problem.

When i google jquery/ajax multipart/form-data submission, the top hits at least mainly include 'contentType:false'. Please could someone explain the reason to me?

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

The jquery API documentation says: contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String When sending data to the server, use this content type.

Why would we need to set it to false for a multipart/form-data submission? When would the false setting be needed at all?

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

解决方案

contentType option to false is used for multipart/form-data forms that pass files.

When one sets the contentType option to false, it forces jQuery not to add a Content-Type header, otherwise, the boundary string will be missing from it. Also, when submitting files via multi-part/form one must leave the processData flag set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.

To try and fix your issue:

You are using jQuery's .serialize() method which creates a text string in standard URL-encoded notation.

You need to pass un-encoded data when using "contentType: false".

Try using "new FormData" instead of .serialize():

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

See for yourself the difference of how your formData is passed to your php page by using console.log().

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

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

这篇关于jQuery的/ Ajax的表单提交（ENCTYPE =＆QUOT;的multipart / form-data的＆QUOT;）。为什么'的contentType：假“在PHP导致未定义的指数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！