利用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

  

 

转载于:https://www.cnblogs.com/wala-wo/p/5119208.html