ajax上传form表单或者文件以及结合validate验证

ajax上传form表单以及validate验证可以有两种方式

1.使用 jquery.form.js插件（可结合文件上传）;

2.原生ajax上传，序列化form表单元素（不可包含文件）;

js文件：jquery.validate jquery.form jquery

HTMl代码

<form id="restaurant-form" class="form-horizontal" action="rest/admin" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-md-3 control-label" for="name_en">Name(en) <span class="text-danger">*</span></label>
<div class="col-md-5">
<input class="form-control" type="text" id="name_en" name="name_en">
</div>
</div>

<div class="form-group">
<input type="file" id="logo" name="logo">
</div>

<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</div>
</div>
</form>

方式1代码---使用 jquery.form.js插件（可结合文件上传）

<script>

$(function(){
jQuery('#restaurant-form').validate({
errorClass: 'help-block animated fadeInDown',
errorElement: 'div',
errorPlacement: function(error, e) {
jQuery(e).parents('.form-group > div').append(error);
},
highlight: function(e) {
jQuery(e).closest('.form-group').removeClass('has-error').addClass('has-error');
jQuery(e).closest('.help-block').remove();
},
success: function(e) {
jQuery(e).closest('.form-group').removeClass('has-error');
jQuery(e).closest('.help-block').remove();
},
rules: {
'name_en': {
required: true
}
}
});

$('#restaurant-form').ajaxForm({
forceSync:false,
success: function(data) {
//---执行相应代码
}
});
});
</script>

方式2代码（不能序列化文件）---原生ajax上传，序列化form表单元素（不可包含文件）

<script>
$(function(){
jQuery('.js-validation-login').validate({
onsubmit:true,
errorClass: 'help-block text-right animated fadeInDown',
errorElement: 'div',
errorPlacement: function(error, e) {
jQuery(e).parents('.form-group .form-material').append(error);
},
highlight: function(e) {
jQuery(e).closest('.form-group').removeClass('has-error').addClass('has-error');
jQuery(e).closest('.help-block').remove();
},
success: function(e) {
jQuery(e).closest('.form-group').removeClass('has-error');
jQuery(e).closest('.help-block').remove();
},
rules: {
'username': {
required: true,
minlength: 3
}
},
messages: {
'username': {
required: 'Please enter a username',
minlength: 'Your username must consist of at least 3 characters'
}
},
submitHandler:function(form){
var param = $(form).serialize();
$.ajax({
"url": 'restaurant/auth',
dataType: 'json',
type: 'post',
data: param,
success: function(data){
//--相应代码
}
});
}
});

});

</script>

ajax上传文件有两种方式

1.使用插件ajaxfileupload(插件是半成品，有些许问题);

2.使用FormData包含文件域（支持HTML5）;

js文件： jquery ajaxfileupload

方式1代码--使用插件ajaxfileupload

$.ajaxFileUpload( {
url : 'restaurant/picture/upload',// 需要链接到服务器地址
fileElementId : 'img', // 文件选择框的id属性
dataType : 'json', // 服务器返回的格式，可以是json
type   : 'post',
//data : {"operation":1},
success : function(data) {

},
error : function(data) {
}
});

方式2代码--使用FormData包含文件域（支持HTML5）

var formData = new FormData();
formData.append('image', $('#img').files[0]);
$.ajax({
url: 'image/upload',
type: 'post',
data: formData,
cache: false,
dataType: "json",
contentType: false,
processData: false,
success: function(data) {

}
});