我一直在尝试使用enctype =“multipart / form-data”提交表单。我有这个设置,因为一旦我找到了文本输入的ajax提交,表单将涉及jpeg / png上传。
使用html格式的动作引用脚本时,php工作正常。
表单数据似乎由以下jquery正确检索,因为警报行显示:productName = Test + Name& productDescription = Test + Description& OtherProductDetails =
jquery成功函数打印到我的HTML的返回数据是一个php错误说:Undefined index:productName
删除contentType: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/ Sending multipart/formdata with jQuery.ajax
jquery API文档说: contentType(默认值:'application / x-www-form-urlencoded; charset = UTF-8') 类型:字符串 将数据发送到服务器时,请使用此内容类型。
为什么我们需要为multipart / form-data提交将其设置为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;
});
答案 0 :(得分:66)
false的contentType选项用于传递文件的多部分/表单数据表单。
当将contentType选项设置为false时,它会强制jQuery不添加Content-Type标头,否则将丢失边界字符串。此外,当通过多部分/表单提交文件时,必须将processData标志设置为false,否则,jQuery将尝试将FormData转换为字符串,这将失败。
尝试解决问题:
您正在使用jQuery的.serialize()方法,该方法以标准的URL编码表示法创建文本字符串。
使用" contentType:false"时需要传递未编码的数据。
尝试使用"新的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);
答案 1 :(得分:7)
请将表单设置为操作属性,如下所示,它将解决您的问题。
<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;
});
});