实现原理

目前需要在一个页面实现多个地方调用上传控件上传文件，并且必须是异步上传。思考半天，想到通过创建动态表单包裹上传文件域，利用jquery.form实现异步提交表单，从而达到异步上传的目的，在上传完毕后移除上传表单，避免与原有表单形成嵌套，导致原有的表单无法正常提交。同时该方式还支持一次上传一个文件，重复上传或者一次上传多个文件，具有较好的方便性。

代码实现

ayscUploadFile方法包含两个参数， wrapId和postMap。

wrapId被指定为要被上传表单包裹的位置id。

postMap是一个对象，主要包含以下信息：

1、表单提交地址Url

由于上传文件的表单都是enctype='multipart/form-data'，不能使用post提交文本参数，需要使用get方式提交其他参数，因此要传递额外的参数在url中直接带上参数。

2、type参数

允许上传的文件类型

3、folder参数

指定上传文件的自定义存储子目录，默认不需要指定。

4、beforeCallback

beforeCallback为ajax提交表单之前事件触发函数

5、successCallback

successCallback为上传成功后的处理函数

6、errorCallback

errorCallback为ajax异步提交表单失败后的处理函数

函数功能

1、异步上传文件

2、支持批量上传文件

function ayscUploadFile(wrapId, postMap){/*判断被包裹的id是否存在*/if(wrapId == "undefined" || wrapId.length == 0){alert("被包裹的id不存在");return false;}else{     wrapId = wrapId.indexOf("#") >= 0 ? wrapId : "#"+ wrapId;}if(!(typeof(postMap) == "object")){alert("上传配置参数错误");return false;}var url = postMap["url"];/*判断url是否为空*/if(!(url != "undeifned" && url.length > 0)){alert("上传地址错误");return false;}else{/*上传文件类型*/var type = ("type" in postMap) ? postMap["type"] : "";/*自定义上传文件目录*/var folder = ("folder" in postMap) ?  postMap["folder"] : "";/*url地址加上限制上传文件的类型*/if(type.length > 0){url = adArgsToUrl(url, "type", type);}/*url地址加上自定义的上传文件存储位置*/if(folder.length > 0){url = adArgsToUrl(url, "folder", folder);}}   /*表单id*/var formId    = "frm_"+ wrapId.replace("#", "");/*生成表单*/var formContent   = "<form id='"+ formId +"' name='"+ formId +"' action='"+ url+"' method='post' enctype='multipart/form-data'></form>";    /*将表单包裹在指定的id上*/if($("form[id="+ formId +"]").length == 0){$(wrapId).wrap(formContent);}/*验证表单中文件域是否已经选择文件*/var checkForm = true;$("form[id="+ formId +"] > :file").each(function(){if(this.value.length == 0){alert("尚未选择文件，请选择文件");checkForm = false;return;}});if(checkForm){/*回调方法*/var beforeCallback  = postMap["beforeCallback"]; var successCallback = postMap["successCallback"];    var errorCallback   = postMap["errorCallback"];  /*异步上传文件*/$("#" + formId).ajaxSubmit({dataType:"html",beforeSend:function(httpRequest){if(typeof(beforeCallback) == "function"){if(!beforeCallback.call(null, formId)){httpRequest.abort();alert("终止执行ajax异步提交")}}else{alert("正在上传文件，请耐心等待，不要关闭浏览器");}},success:function(responseText){alert(responseText)/*重置表单，确保允许继续添加上传文件*/resetForm();if(typeof(successCallback) == "function"){/*解析返回结果*/   successCallback.call(null, parseResultMap(responseText));}else{alert("文件上传成功");}},error:function(responseText){resetForm();if(typeof(errorCallback) == "function"){/*解析返回结果*/errorCallback.call(null);}else{alert("网络通讯异常，上传失败，请重新上传或稍后再试");}}});}/*重置表单信息*/function resetForm(){/*重置上传表单内容，方便上传新的文件*/$("#"+ formId).clearForm();/*移除表单，恢复原样，避免表单嵌套*/$(wrapId).unwrap("#"+ formId);    }/*解析返回结果*/function parseResultMap(responseText){var resultMap = {};var jsonObject = eval("("+ responseText +");");var fileName     = ("fileName" in jsonObject) ? jsonObject["fileName"] : "";var fileSize  = ("fileSize" in jsonObject) ? jsonObject["fileSize"] : "";var fileUrl   = ("fileKey" in jsonObject) ? jsonObject["fileKey"] : "";var fileExt     = ("fileExt" in jsonObject) ? jsonObject["fileExt"] : "";var message     = ("message" in jsonObject) ? jsonObject["message"] : "上传失败";var uploadState = ("uploadState" in jsonObject) ? jsonObject["uploadState"] : "0";       fileSize = (parseInt(fileSize)/1024).toFixed(2);resultMap["fileName"] = fileName;resultMap["fileSize"] = fileSize;resultMap["fileUrl"] = fileUrl;resultMap["fileExt"] = fileExt;resultMap["message"] = message;   resultMap["uploadState"] = uploadState;   return resultMap;}
}

上述函数使用需要引入的外部脚本文件

    <script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.form.js"></script>

另外特别说明：

beforeSend方法实际上实在$.ajax中，他接收一个XMLHTTPRequest参数，因此若要挂起ajax请求，执行XMLHTTPRequest的abort()即可。

parseResultMap方法为接收服务器返回的数据并进行处理。、

ajaxSubmit方法实现的异步提交实际上还是jquery的$.ajax的进一步封装，方便了大家的使用.

批量上传文件

该方法也支持一次上传多个文件。但必须创建多个文件域控件，到时上传表单包含这些文件域，实现批量上传文件。

<div id="divWrap"><input type="file" id="fileOne"    name="fileOne"   value="" /><input type="file" id="fileTwo"   name="fileTwo"   value="" /><input type="file" id="fileThree"     name="fileThree"value="" /><input type="file" id="fileFour"   name="fileFour" value="" />
</div>

需要批量上传的文件域必须被包裹在指定的包裹id里（divWrap），包裹id用于指定动态表单的创建位置。上面的html代码，就是一个包含多个文件域的实例，这样就可以一次上传多个文件。

另外一种 方式可以曲线实现批量上传。用户每上传完毕一个文件后，允许用户继续上传文件，回调函数把服务器返回的上传文件信息输出给页面，页面记录下用户所有的上传文件信息。

参考资料

http://api.jquery.com/Ajax_Events/

http://baike.baidu.com/link?url=zsF_hdb0eZGOtzG2-fwLiHSPJDw0NqZ9GqXScpmBoF3Y_UauuT3HlJrt6raotAsVbVg-_TZQ6zdkh-GYZ91Wn_

http://www.w3school.com.cn/xmldom/dom_http.asp

http://www.cnblogs.com/beniao/archive/2008/03/29/1128914.html

https://github.com/malsup/form