使用jquery.form.js需要从网上下载。
jquery.form.js提交form表单插件提供了表单ajaxe提交解决方案，下面对比一下使用jquery自己的ajax提交和jquery.form的提交由啥不同。
通常没有使用jquery.form插件的情况下我们可以像下面代码来提交表单：
//jquery ajax 方式提交表单
var $form = $("#form"),
action = $form.attr("action");
$form.on("submit",function(){
$.post(action,$form.serialize(),function(res){
//请求成功代码在这里
alert("提交成功！");
},'json');
return false
});
====================================
//jquery.form.js 的ajax提交表单
$('#form2').submit(function() {
$(this).ajaxSubmit(function() {
alert("提交成功！");
});
return false; //阻止表单默认提交
});
jquery.form.js中ajaxSubmit()可以像上面代码一样只传递一个成功的回调函数，也可以传递更多参数，参数如下：
//jquery.form.js 中的ajaxSubmit() 可以是一个回调函数或者是更多参数，如下：
var options = {
//data: {}, //表单上传之外，自己随意写额外的参数
//url: url, //默认是form的action
//type: type, //默认是form的method（get or post）
//dataType: null, //html(默认), xml, script, json...接受服务端返回的类型
//clearForm: true, //成功提交后，清除所有表单元素的值
//resetForm: true, //成功提交后，重置所有表单元素的值
//target: '#output', //把服务器返回的内容放入id为output的元素中
//timeout: 3000, //限制请求的时间，当请求大于3秒后，跳出请求
//提交前的回调函数
beforeSubmit: function(formData, jqForm, options){
//formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
//jqForm: jQuery对象，封装了表单的元素
//options: options对象
//比如可以再表单提交前进行表单验证
},
//提交成功后的回调函数
success: function(data,status,xhr,$form){},
error: function(xhr, status, error, $form){},
complete: function(xhr, status, $form){}
};
====================
下面我们来一段jquery.form表单提交的实战例子完整代码：
$('#formLogin').on("submit",function() {
$(this).ajaxSubmit(
{
//url: url, //默认是form的action
//type: type, //默认是form的method（get or post）
//dataType: "json", //html(默认), xml, script, json...接受服务端返回的类型
//clearForm: true, //成功提交后，清除所有表单元素的值
//resetForm: true, //成功提交后，重置所有表单元素的值
target: '#output', //把服务器返回的内容放入id为output的元素中
//timeout: 3000, //限制请求的时间，当请求大于3秒后，跳出请求
//提交前的回调函数
beforeSubmit: function(arr,$form,options){
//formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
//jqForm: jQuery对象，封装了表单的元素
//options: options对象
//比如可以再表单提交前进行表单验证
console.log("beforeSubmit",arr,$form,options)
},
//提交成功后的回调函数
success: function(data,status,xhr,$form){
console.log("success",data,status,xhr,$form);
if(data.Flag){
console.log(data.Content)
}
},
error: function(xhr, status, error, $form){
console.log("error",xhr, status, error, $form)
},
complete: function(xhr, status, $form){
console.log("complete",xhr, status, $form)
}
}
);
return false; //阻止表单默认提交
});
以下是使用options，同时可以在beforeSubmit提交前进行验证，在success后显示结果提示或是否跳转
$(document).ready(
function
() {
var
options = {
target:
'#output1'
,
// 从服务传过来的数据显示在这个div内部
也就是ajax局部刷新
beforeSubmit: showRequest,
// ajax提交之前的处理
success: showResponse
// 处理之后的处理
};
$(
'#showDataForm'
).submit(
function
() {
$(
this
).ajaxSubmit(options);
return
false
;
//非常重要，如果是false，则表明是不跳转
//在本页上处理，也就是ajax，如果是非false，则传统的form跳转。
});
});
function
showResponse(responseText, statusText, xhr, $form) {
alert(xhr.responseText+
"=="
+$form.attr(
"method"
)+
'status: '
+
statusText +
'\n\nresponseText: \n'
+ responseText);
//xhr：说明你可以用ajax来自己再次发出请求
//$form：是那个form对象，是一个jquery对象
//statusText：状态，成功则为success
//responseText，服务器返回的是字符串（当然包括html，不包括json）
}
function
showRequest(formData, jqForm, options) {
//formData是数组，就是各个input的键值map数组
//通过这个方法来进行处理出来拼凑出来字符串。
//formData：拼凑出来的form字符串，比如name=hera&password，
//其实就是各个表单中的input的键值对，
//如果加上method=XXXX，那也就是相当于ajax内的data。
var
queryString = $.param(formData);
alert(queryString+
"======"
+formData.length);
for
(
var
i=0; i < formData.length; i++) {
alert(formData[i].value+
"==============="
+formData[i].name);
}
//jqForm，jquery form对象
var
formElement = jqForm[0];
alert($(formElement).attr(
"method"
));
alert($(jqForm[0].name).attr(
"maxlength"
));
//非常重要，返回true则说明在提交ajax之前你验证
//成功，则提交ajax form
//如果验证不成功，则返回非true，不提交
return
true
;
}
个人代码：
$("#form1").ajaxSubmit({
dataType: "json",//这个地方与控制器传过来的数据类型一致
type: "Post",
url: _rootUrl + "InputExcel/InputExcelData",//默认是form1的action
data:{ 'filePath': strPath, 'tabName': $('#ddlInputTable').val(),}，
success: function (data) {
if (data.state == 1) {
alert("导入成功！");
} else {
alert("导入失败！\r\n" + data.msg);
}
}
})
<input type="file" />
<form id="form1" method="post" enctype="multipart/form-data" >
不管上传文件还是导入excel数据，必须使用enctype="multipart/form-data"：
因为如果不加这句话，获取的仅仅是本地此文件的路径，传到服务器端根本没办法使用客户端的文件路径。
加上这句就是以文件流的形式传送文件，在后台传文本框的内容得到的是本地文件路径。而使用
HttpPostedFileBase postFile = Request.Files["selPath"];
string fileName = postFile.FileName;
获取的也仅仅是文件名，因为它并没有把文件上传到服务器的硬盘上，而是把文件以流的形式上传，同时也能得到文件名。我们使用流。
上传文件到服务器：
HttpPostedFileBase postFile = Request.Files["fileUp"];
string fileName = Path.GetFileName(postFile.FileName);
string dir = Path.Combine(Request.MapPath("~/FileUpload"), fileName );
postFile.SaveAs(dir);//保存文件
读取excel流：
HttpPostedFileBase postFile = Request.Files["selPath"];
string fileName = Path.GetFileName(postFile.FileName);
Stream stream = postFile.InputStream;
byte[] bytes = new byte[postFile.ContentLength];
stream.Read(bytes, 0, postFile.ContentLength);