利用jquery.form实现异步上传文件

实现原理

目前需要在一个页面实现多个地方调用上传控件上传文件，并且必须是异步上传。思考半天，想到通过创建动态表单包裹上传文件域，利用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