jquery异步文件上传插件ajaxFileUpload教程（支持多文件上传）

       ajaxFileUpload是一款基于jquery的ajax上传方式的文件上传插件，它没有对上传控件作美化（使用原生态的上传控件)，只是提供了异步上传的功能，但用它来作异步上传确实很简单和方便。下来我来说说使用步骤：

       一：引入JS文件——ajaxFileUpload.js，引入之前需先引入jquery文件。由于ajaxFileUpload用的jquery版本比较低，此插件现在已经不更新了，为了能正常使用此插件，需要在ajaxFileUpload.js里加入handleError函数（此函数jquery1.4.2才有，之后的版本就废除了），此函数代码如下（我的资源中提供了此插件的文件）：

 

    handleError: function( s, xhr, status, e )      {  
            // If a local callback was specified, fire it  
                    if ( s.error ) {  
                        s.error.call( s.context || s, xhr, status, e );  
                    }  
      
                    // Fire the global callback  
                    if ( s.global ) {  
                        (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );  
                    }  
        },  

       二：用它的上传函数ajaxFileUpload来上传：

 

参数说明:

1、url　　　　　　　　　　 服务器上传接口地址，这个就不用说了吧。　　
2，fileElementId　　　　　  文件控件的id：<input type="file" id="file" name="file" />（文件控件的id和name属性都写上，避免浏览器兼容问题）。
3，secureuri　　　　　　　 是否启用安全提交，默认为false。
4，dataType　　　　　　　 服务器返回的数据类型。可以为xml,script,json,html。
5，success　　　　　　　　成功回调函数（回调函数得不到返回信息为JSON方式的数据，真是个坑）。
6，error　　　　　　　　　 失败回调函数。
7，data 　　　　　　　　　 自定义参数（file对象不用再写在这里，只要把除file对象之外的参数写进去）。
8, type 　　　　　　　　　  传参方式（post和get），最好用post。

     实例：

 

        var serverPath = serverAddress;
	var user = JSON.parse(sessionStorage.getItem("user"));
	var addr_uploadPhoto = serverPath + '/api/user/uploadUserImage.shtml';
	 function uploadPhoto(){
         $.ajaxFileUpload( {  
           url : addr_uploadPhoto, 
            secureuri : false,
            fileElementId : 'file', 
            dataType : 'json', 
            data:{userId:user.id},
            success : function(data) 
            {  
              alert("上传成功！");
            }
        })  
    }  

 

       控件本身是不支持多文件上传的，为了实现多文件上传，我们要改源码（createUploadForm方法）：

 

//		var oldElement = jQuery('#' + fileElementId);
//		var newElement = jQuery(oldElement).clone();
//		jQuery(oldElement).attr('id', fileId);
//		jQuery(oldElement).before(newElement);
//		jQuery(oldElement).appendTo(form);

		for(var i in fileElementId){
			var oldElement = jQuery('#' + fileElementId[i]);
			var newElement = jQuery(oldElement).clone();
			jQuery(oldElement).attr('id', fileId);
			jQuery(oldElement).before(newElement);
			jQuery(oldElement).appendTo(form);
		} 

      如此便可以多文件上传了。示例如下：

var serverPath = serverAddress;
var certificationAddress = serverPath + '/api/usercer/setUserCertification.shtml';
var user = JSON.parse(sessionStorage.getItem("user"));
function setUserCert(){
	var realName=document.getElementById("realName").value;
	var cardNo=document.getElementById("cardNo").value;
	var address=document.getElementById("address").value;
	var professional=document.getElementById("professional").value;
	var dueTime=document.getElementById("dueTime").value;
    var sexArray=document.getElementsByName("sex");
    var islongArray=document.getElementsByName("islong");
    var state=document.getElementById("state").value;
    if(state==0){
    	swal("提示","审核中，不要重复提交","warning");
    	return false;
    }else if(state==2){
    	swal("提示","已审核通过，若要修改请联系客服","warning");
    	return false;
    }
    var sex="";
    var islong ="";
    var data="";
    if(realName==""||realName==null||realName.length==0){
    		swal("提示","请输入真实姓名！","warning");
    		return false;
    }
    if(cardNo==""||cardNo==null||cardNo.length==0||!(/^\d{15}(\d{2}[A-Za-z0-9])?$/.test(cardNo))){
    		swal("提示","请输入合法身份证号！","warning");
    		return false;
    }
    for(var i=0;i<sexArray.length;i++){
    	if(sexArray[i].checked){
    		sex=sexArray[i].value;
    	}
    }
    for(var i=0;i<islongArray.length;i++){
    	if(islongArray[i].checked){
    		islong=islongArray[i].value;
    	}
    }
    if(islong==0){
    	if(dueTime==""||dueTime==null||dueTime.length==0){
    		swal("提示","请选择身份证过期日期！","warning");
    		return false;
    	}
    	data={"uid":user.id,"address":address,"professional":professional,"ifLong":islong,"dueTime":dueTime,"sex":sex,"cardNo":cardNo,"realName":realName};
    }else{
    	data={"uid":user.id,"address":address,"professional":professional,"ifLong":islong,"sex":sex,"cardNo":cardNo,"realName":realName};
    }
	    $.ajaxFileUpload( {  
           url:certificationAddress,
            secureuri : false, 
            fileElementId : ["fileHandCard","filePositiveCard","fileReverseCard"],//文件上传控件的id属性  
            dataType : 'json',
            type:"post",
            data:data,
            success : function(json) //服务器成功响应处理函数  
            {
            	alert("提交成功！");
            }
        })  
}