Jquery/Ajax 表单提交(enctype=“multipart/form-data").为什么“contentType:False"会导致 PHP 中的索引未定义? [英] Jquery/Ajax Form Submission (enctype="multipart/form-data" ). Why does 'contentType:False' cause undefined index in PHP?
问题描述
我一直在尝试使用 enctype="multipart/form-data" 提交表单.我有这个设置，因为一旦我弄清楚文本输入的 ajax 提交，表单将涉及 jpeg/png 上传.
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.
在使用表单 html 中的操作引用脚本时，php 工作正常.
the php works fine when referencing the script using action within the form html.
表单数据似乎被下面的 jquery 正确检索，因为警告行显示:productName=Test+Name&productDescription=Test+Description&OtherProductDetails=
the form data seems to be retrieved correctly by the below jquery because the alert line shows: productName=Test+Name&productDescription=Test+Description&OtherProductDetails=
jquery 成功函数打印到我的 HTML 的返回数据是一个 php 错误说:Undefined index: productName
the returned data printed to my HTML by the jquery success function is a php error saying:Undefined index: productName
删除 contentType:false 可以解决问题.
removing contentType:false fixes the problem.
当我在 google 上搜索 jquery/ajax multipart/form-data 提交时，命中率最高的至少主要包括 'contentType:false'.请有人可以向我解释原因吗?
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-ajaxhttp://hayageek.com/jquery-ajax-form-submit/使用 jQuery.ajax 发送 multipart/formdata
jquery API 文档说:contentType(默认值:'application/x-www-form-urlencoded; charset=UTF-8')类型:字符串向服务器发送数据时，使用此内容类型.
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.
为什么我们需要为 multipart/form-data 提交将其设置为 false?什么时候需要假设置?
Why would we need to set it to false for a multipart/form-data submission? When would the false setting be needed at all?
查询:
$("#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 选项为 false 用于 multipart/form-data传递文件的表单.
contentType option to false is used for multipart/form-data forms that pass files.
当将 contentType 选项设置为 false 时，它会强制 jQuery 不添加 Content-Type 标头，否则将丢失边界字符串.此外，当通过 multipart/form-data 提交文件时，必须将 processData 标志设置为 false，否则 jQuery 会尝试将您的 FormData 转换为字符串，这将失败.<小时>尝试解决您的问题:
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 multipart/form-data, 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:
使用 jQuery 的 .serialize() 方法以标准 URL 编码表示法创建文本字符串.
Use jQuery's .serialize() method which creates a text string in standard URL-encoded notation.
使用contentType:false时需要传递未编码的数据.
You need to pass un-encoded data when using contentType: false.
尝试使用 new FormData 而不是 .serialize():
var formData = new FormData($(this)[0]);
通过使用 console.log() 亲眼看看您的 formData 如何传递到您的 php 页面的不同之处.
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=“multipart/form-data").为什么“contentType:False"会导致 PHP 中的索引未定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
