servlet3.0以上form表单提交（ajax异步提交）

一、普通form提交

1、jsp

<form id="form" method="post" name="upload" enctype="multipart/form-data" action="/index.do">
<input type="file" id="file111" name="file" onchange="checkAll(this)"/>
<input type="text" name="text" value="123">
<input type="submit" value="submit"/>
</form>

2、servlet（还有一个使用Apache的commomFileUpload插件上传）

@MultipartConfig(location = "/upload",maxFileSize = 1024*1024*3,maxRequestSize = 1024*1024*10,fileSizeThreshold = 1)//一定要表明该注解
public class HelloServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String text = req.getParameter("text");
Part part = req.getPart("file");
part.write("D:\\test.jpg");

/**
* 多文件上传的处理
*/
Collection<Part> parts = req.getParts();
for (Part part1 : parts) {
//处理方式
}
}
}

其中：

location：表示文件存储的位置。默认为当前文件工作运行路径。
maxFileSize：允许上传的文件最大值(单位为字节)，默认为-1，表示没有限制。
maxRequestSize：针对该mulitpart/from-data请求的最大值(单位为字节)，默认为-1.
fileSizeThread：当数据量大于该值时，内容将被写入文件。

二、AJAX异步传输

1、使用FormData对象传输

(1)html

<form id="tf">
<input type="file" name="img"/>
<input type="text" name="username"/>
<input type="button" value="提" onclick="test();"/>
.............

</form>

(2) js (jquery)
无文件的上传

var form = new FormData();
form.append("username","zxj");//form中的文本域
form.append("password",123456);//form中的文本域
　$.ajax({
url:"${pageContext.request.contextPath}/public/testupload",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
}
});

有文件的上传

function test(){
var form = new FormData(document.getElementById("tf"));
$.ajax({
url:"${pageContext.request.contextPath}/public/testupload",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
window.clearInterval(timer);
console.log("over..");
},
error:function(e){
alert("错误！！");
window.clearInterval(timer);
}
});
get();
//
此处为上传文件的进度条

}

2、使用jquery.form.js

Jquery.form.js是一个强大的表单插件，其大量的提供了表单操作的各种简便的方法，下面给出一些Jquery.form.js的说明：

 

ajaxForm	增加所有需要的事件监听器，为ajax提交表单做准备。ajaxForm并不能提交表单。在document的ready函数中，使用ajaxForm来为ajax提交表单进行准备。	接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。	$("#formid").ajaxForm();
ajaxSubmit	使用ajax提交表单。	接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。	$("#formid").ajaxSubmit(); 或 $("#formid").submit(function(){     $(this).ajaxSubmit();     return false; });
formSerialize	将表单串行化（或序列化）为一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2。	无	$("#formid").formSerialize();
fieldSerialize	将表单的字段元素串行化（或序列化）为一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，使用这个就很方便了。返回以下格式的字符串：name=value1&name2=value2。	无	$("#formid .specialFields").fieldSerialize();
fieldValue	返回匹配插入数组中的表单元素值。该方法以数组的形式返回数据。如果元素值被判定可能无效，则数组为空。	无	$("#formid :password").fieldValue();
resetForm	将表单恢复到初始状态。	无	$("#formid").resetForm();
clearForm	清除表单元素。该方法将所有的text、password、textarea置空，清除select元素中的选定，以及所有radio按钮和checkbox按钮重置为非选定状态。	无	$("#formid").clearForm();
clearFields	清除字段元素。只有部分表单元素需要清除时方便使用。	无	$("#formid .specialFields").clearFields();

Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。

 

target	指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串、一个jquery对象、一个DOM元素。	默认值：null
url	指定提交表单数据的URL。	默认值：表单的action属性值
type	指定提交表单数据的方法（method）：“GET”或“POST”。	默认值：GET
beforeSubmit	表单提交前被调用的回调函数。如果回调函数返回false表单将不被提交。回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。	默认值：null
success	表单成功提交后调用的回调函数。然后dataType选项值决定传回responseText还是responseXML的值。	默认值：null
dataType	返回的数据类型：null、"xml"、"script"、"json"其中之一。	默认值：null
resetForm	表示如果表单提交成功是否进行重置。	默认值：null
clearForm	表示如果表单提交成功是否清除表单数据。	默认值：null

 

那么现在来说一些它的主要用法吧！

 

它也支持对一个表单的ajax提交，而且提交方式更为简便，如下：

html:

<
form
id
="tf"
>

<
input
type
="file"
name
="img"
/>

<
input
type
="text"
name
="username"
/>

<
input
type
="button"
value
="提"
onclick
="test();"
/>

</
form
>

下面使用jquery.form.js的表单插件来提交表单

$("#tf").ajaxSubmit();

额，就是这么简单，你也不要问我为什么就是这么简单，然后它就是会把整个表单，作为一个ajax来提交，同样的，它也支持文件上传！一些其它的用法，请参照前面给出的说明就可以了！

具体情况http://transcoder.baiducontent.com/from=1019023i/bd_page_type=1/ssid=0/uid=0/pu=usm%401%2Csz%401320_2001%2Cta%40iphone_1_9.1_3_601/baiduid=8D95CDADA887ED97CD3670EBF339EE00/w=0_10_/t=iphone/l=3/tc?ref=www_iphone&lid=13911048936435242302&order=3&fm=alop&h5ad=1&srd=1&dict=32&tj=www_normal_3_0_10_title&url_mf_score=5&vit=osres&m=8&cltj=cloud_title&asres=1&title=%E4%BD%BF%E7%94%A8ajax%E6%8F%90%E4%BA%A4form%E8%A1%A8%E5%8D%95%2C%E5%8C%85%E6%8B%ACajax%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0-%E6%9C%B1..._%E5%8D%9A%E5%AE%A2%E5%9B%AD&w_qd=IlPT2AEptyoA_yi9Jk_-nQDWO6wvtItSok6ZsxezdeJc&sec=23930&di=5ffb834b52dd9a2f&bdenc=1&tch=124.1233.278.740.1.1100&nsrc=IlPT2AEptyoA_yixCFOxXnANedT62v3IEQGG_ytK1DK6mlrte4viZQRASDfaOH_XHEv5wSPQpt5Ywk_f_G9p9B2CwvQkfjS&eqid=c10df94dc54c58001000000559b89a66&wd=&clk_info=%7B%22srcid%22%3A%221599%22%2C%22tplname%22%3A%22www_normal%22%2C%22t%22%3A1505270637142%2C%22sig%22%3A%22262431%22%2C%22xpath%22%3A%22div-a-h3%22%7D