由于项目的原因,需要异步上传文件,网上找了找,很多都是用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);