【发布时间】：2015-05-02 10:31:10
【问题描述】：
我得到了表单文件输入（只有 1 个文件）所以提交它我试过这个：
$("#addBrand").validate({
rules: {
brandName: "required",
brandLogo: "required"
},
messages: {
brandName: "Please enter the brand name",
brandLogo: "Please add brand Logo"
},
errorElement: 'p',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.form-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
submitHandler: function(form, event) {
run_waitMe();
var $form = $(form);
event.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
var url = $form.attr('action');
var data = new formData();
data.append ('brandName', $('#brandName').val());
data.append('brandLogo', $('#brandLogo')[0].files[0] );
$.post(url, data, function(response) {
//handle successful validation
$('.wrapper').waitMe('hide');
if (response["fail"] == true) {
var errors = response['errors'];
for (var key in errors) {
if (errors.hasOwnProperty(key)) {
var field = errors[key];
for ( var i = 0; i < field.length; i++) {
var $input = $form.find('#' + key );
($input.parent().find("p")).remove();
$input.parent().parent().removeClass( "has-error" );
$input.parent().parent().addClass( "has-error" );
$input.after('<p id="'+ key + '-error" class="help-block">'+ field[i]+'</p>');
}
}
}
} else {
$('.wrapper').waitMe('hide');
$('#addBrand').modal('hide');
$(".combobox").prepend("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
console.log("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
}
}).fail(function(response) {
//handle failed validation
$('.wrapper').waitMe('hide');
console.log("Failed");
});
}
});
使用此代码，我收到此错误：
formData 未定义：var data = new formData();
我也尝试过这样的事情：
submitHandler: function(form) {
$('#addBrand').unbind('submit').bind('submit', function(e){
run_waitMe();
var $form = $(this);
e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
var url = $form.attr('action');
var data = new FormData();
data.append ('brandName', $('#brandName').val());
data.append('brandLogo', $('#brandLogo')[0].files[0] );
$.post(url, data, function(response) {
//handle successful validation
$('.wrapper').waitMe('hide');
if (response["fail"] == true) {
var errors = response['errors'];
for (var key in errors) {
if (errors.hasOwnProperty(key)) {
var field = errors[key];
for ( var i = 0; i < field.length; i++) {
var $input = $form.find('#' + key );
($input.parent().find("p")).remove();
$input.parent().parent().removeClass( "has-error" );
$input.parent().parent().addClass( "has-error" );
$input.after('<p id="'+ key + '-error" class="help-block">'+ field[i]+'</p>');
}
}
}
} else {
$('.wrapper').waitMe('hide');
$('#addBrand').modal('hide');
$(".combobox").prepend("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
console.log("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
}
}).fail(function(response) {
//handle failed validation
$('.wrapper').waitMe('hide');
console.log("Failed");
});
});
}
但我收到此错误：
TypeError：在未实现的对象上调用了“附加” 接口表单数据。
【问题讨论】：
-
试试这个 jquery 插件：malsup.com/jquery/form 对我来说效果很好。
-
@FabianLurz 感谢分享，但我需要知道，学习如何去做 :)
Dont give me fish, show me how to catch it -
我会分享一个可以上传图片的解决方案 - 这对你有帮助吗？
-
当然，但正如我告诉你的，我需要知道我的代码有什么问题以及我错过了什么
-
好的 - 第一个例子应该说： var formData = new FormData();第二个例子：试试这个stackoverflow.com/questions/19722920/…
标签： javascript jquery html ajax