写一个基于HTML5的文件异步上传控件

现在文件上传控件有很多，比如JQuery的jQuery File Upload等等。功能必须说，非常强大，官方文档写的也很清楚。要说缺点也只有一个，加载的文件很多（举例的这个光js就有4个，这对服务器来说是负担），通常在web开发中不需要这么多功能，本这对前端开发的优化，在加上现在html5的普及，自己写一个适合自己的控件非常有必要。

废话不多说，直接上代码

前端代码，其中已经有了注释了

文件名
上传进度






upload.js代码

var upload = function(input){
if(window.FormData)
{
if(input.val() == '' || input.val() == 'undefined')
return false;

var files = input[0].files;//保存要上传的文件
var formData = new FormData();//文件上传通道
var fileReader = new FileReader();

var getFileType = function(filename){
var extStart  = filename.lastIndexOf(".")+1;
return filename.substring(extStart,filename.length).toUpperCase();
};

var clearInput = function(){
input.val('');
};

var getKey = function(){//获得一个key  10位数字  这样可以保证几率比较小了  假如还想要几率小  可以计算md5
return Math.floor(Math.random()*10000000000);
};

var key = getKey();//保存文件的唯一key
var url = input.attr('data-url')||arguments[1].url;//上传地址
var progress = arguments[1].progress;//上传进度条
var complete = arguments[1].complete;//上传完成
var error = arguments[1].error;//上传失败
var maxSize = arguments[1].maxSize;//文件大小  单位字节  过滤器
var fileType = arguments[1].fileType;//文件类型  过滤器
var data = arguments[1].data;//额外数据
var OnStart= arguments[1].onStart;//准备上传
var abortBtn = arguments[1].abortBtn;//中断上传按钮
var OnAbort= arguments[1].onAbort;//中断函数
//文件类型验证
var type = getFileType(files[0].name);//获得文件类型
var typeAllow = false;
if(typeof fileType == 'object')
{
var arrayType = fileType.type;
$.each(arrayType,function(index,value){
if(value.toUpperCase() == type)
{
typeAllow = true;
return false;//相当于break
}
});
if(!typeAllow)
{
fileType.error(files[0],key);
return false;
}
}
//文件大小验证
if(typeof maxSize == 'number')
{
if(files[0].size >= maxSize)
{
maxSize.error(files[0],key);
return false;
}
}
else if(typeof maxSize == 'object')
{
if(files[0].size >= maxSize.size)
{
maxSize.error(files[0],key);
return false;
}
}
//将文件加入到上传通道
formData.append(input.attr('name')||'files', files[0]);
var xhr = new XMLHttpRequest();
//附加额外的数据
if(data != '' && data != 'undefined')
{
$.each(data,function(index,value){
formData.append(index,value);
});
}
//开始上传
xhr.open('POST',url,true);
xhr.Onload= function(){
if(xhr.status == 200 && xhr.readyState == 4)
{
if(typeof complete == 'function')
complete(xhr.response,files[0],key);
//clearInput();
}
else
{
if(typeof error == 'function')
error(files[0],key);
}
};
xhr.upload.Onprogress= function(event){
progress(event,files[0],key);
};
xhr.Onloadstart= function(event){
onStart(event,files[0],key);
};
xhr.send(formData);
//添加中断
$('.'+key).find(abortBtn).click(function(){
xhr.abort();
onAbort(files[0],key);
});
return {key:key,xhr:xhr};
}
else
{
alert('浏览器版本过低');
return null;
}
}



暂时input元素中不支持multiple属性，我尝试过，js没办法获取到多个文件的信息，只能获取到一个，假如有知道的请给我留言，我随时改进

以上代码在chrome中测试通过
后台获取方式和正常的一样，对文件大小没有限制，假如有限制也是服务器软件或者后台语言的限制，在初始化参数中你可以设立上传的大小限制，