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("提交成功！");
}
})
}
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery