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>無檔案的上傳
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