由于项目的原因，需要异步上传文件，网上找了找，很多都是用jquery.form插件的，于是乎找资料，调代码，做点小笔记。
官方资料：http://www.malsup.com/jquery/form/
demo:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>File Upload Demo</title> 6 </head> 7 <body> 8 <form id="up" enctype="multipart/form-data"> 9 <input type="file" name="file"> 10 </form>
11 <button id="doUp">GO</button>
12 <script src="jquery.js"></script> 13 <script src="jquery.form.js"></script> 14 <script> 15 $(function(){ 16 $("#doUp").on("click",function(){ 17 console.log($(this)); 18 $("#up").ajaxSubmit({ 19 type:"post", 20 url:"http://target.com", 21 success:function(data){ 22 console.log(data); 23 }, 24 error:function(XmlHttpRequest,textStatus,errorThrown){ 25 console.log(XmlHttpRequest); 26 console.log(textStatus); 27 console.log(errorThrown); 28 } 29 }) 30 }) 31 }) 32 </script> 33 </body> 34 </html>
使用的时候需要引入Jquery.js和jquery.form.js两个库文件。
通常情况下都是使用ajaxSubmit()来提交form表单的数据，此方法的参数是个对象，具体如下
| 属性 | 描述 |
| url | Ajax请求将要提交到该url，默认是表单的action属性值 |
| type | 指定提交表单数据的方法（method）：“GET”或“POST”。默认值：表单的method属性值（如果没有找到默认为“GET”）。 |
| dataType | 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持： 'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。 'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。。 'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。。 默认值：null（服务器返回responseText值） |
| target | 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。 默认值：null。 |
| beforeSubmit | 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。 默认值：null |
| success | 表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。 默认值：null |
| clearForm | 表示如果表单提交成功是否清除表单数据。默认值：null |
| resetForm | 表示如果表单提交成功是否进行重置。默认值: null |
或者可以直接将所有操作定义为一个对象，赋值给一个变量再传入ajaxSubmit()中，如：
1 var options={ 2 url:"http://target", 3 type:"POST", 4 success:parse 5 } 6 function parse(data){ 7 console.log(data); //这里是回调函数的代码 8 } 9 $("#up").ajaxSubmit(options);