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("提交成功！");            }        })  }