项目中用到一个HTML5上传功能，带进度条实现。
进度条需要获取上传中状态，需要布在环境中才能实现。
以下代码开发用的环境为PHP，在JAVA下应该可以直接运行。可以试下，
代码没有多麻烦。
纯属个人记录，请勿喷。
@baukh20140625:优化了验证文件类型。
/*
@baukh 上传功能 基于jquery,html5
@baukh20140625:优化了验证文件类型
*/
//全局变量
var NOWlOADING, //正在上传的文件进度条区域【file_plan】
XMLHTTP; //XMLHttpRequest实例化对象
var Au_upload = {
/*
$arg.updataArea :上传区域
$arg.updata_main :上传事件区域
$arg.upFile_hide :上传文件隐藏事件
$arg.upFile_show :上传文件伪事件【模拟生成事件，调用隐藏的功能，用于处理样式问题】
$arg.updata_list :上传文件队例
$arg.upadat_tip :上传提示文字
$arg.file_plan :上传进度条
$arg.file_name :上传文件名
$arg.file_action :上传中或已上传文件的删除操作
$arg.fileClass :允许上传的文件类型
$arg.fileMaxSize :允许上传的文件最大值
$arg.allowVoid :是否允许为空
$arg.updataUrl :文件上传地址
$arg.delFileUrl :删除已上传文件地址
*/
init: function(pre){
if(!pre){
var pre = {};
}
var arg = {
updataArea : pre.updataArea || '.updataArea',
updata_main : pre.updata_main || '.updata_main',
upFile_hide : pre.upFile_hide || '.upFile_hide',
upFile_show : pre.upFile_show || '.upFile_show',
updata_list : pre.updata_list || '.updata_list',
upadat_tip : pre.upadat_tip || '.upadat_tip',
file_plan : pre.file_plan || '.file_plan',
file_name : pre.file_name || '.file_name',
file_action : pre.file_action || '.file_action',
fileClass : pre.fileClass || ['dwg','pdf','doc','docx','ppt','pptx','jpg','png','bmp','gif','rar','zip','giz','txt','et','dps','wps','xls','xlsx','accdb','pub','swf'],
fileMaxSize : pre.fileMaxSize || 2 * 1024 * 1024,
allowVoid : pre.allowVoid || false,
uploadUrl : pre.uploadUrl || APP+'/Custom/addFile',
delFileUrl : pre.delFileUrl || APP+'/Custom/delFile',
}
if(!Au_upload.bind_Source(arg)){
console.log('%cbind_Source：在绑定上传事件时，失败','color:#f00');
}
if(!Au_upload.bind_DelFile(arg)){
console.log('%cbind_DelFile：在绑定删除文件事件时，失败','color:#f00');
}
}
/*
@bind_Source:触发源头绑定事件
//视觉展现的是伪上传按钮，真实的上传按纽处于隐藏状态
*/
,bind_Source: function(arg){
var updataArea = $(arg.updataArea);
if(!updataArea || updataArea.length == 0){
console.log('未找到有效的上传区域，程序已终止');
return false;
}
//绑定打开选择文件框
var upFile_show = updataArea.find(arg.upFile_show);
upFile_show.die('click');
upFile_show.live('click',function(){
var _this = $(this);
var _this_upFile_hide = _this.parent().find(arg.upFile_hide);
_this_upFile_hide.click();
});
//绑定文件上传隐藏域的值变更事件
var upFile_hide = updataArea.find(arg.upFile_hide);
upFile_hide.die('change');
upFile_hide.live('change',function(){
Au_upload.addFile(arg,$(this));
});
return true;
}
/*
@addFile:增加上传文件
*/
,addFile: function(arg,upFileSource){
var _upFileSource = $(upFileSource); //文件DOM
var oFile = upFileSource.get(0).files[0]; //获取文件
var fileName = _upFileSource.val(); //文件名
var fileSplit = fileName.split('.'); //分割文件名，产生数组
var fileType = fileSplit[fileSplit.length - 1]; //文件名后缀
// 对文件类型进行验证【采用后缀而不去使用通过文件获取的type】
if(arg.fileClass.length > 0){ //如果后缀数组为空的时候，将不再进行后缀验证
var TypeIsRight = $.inArray(fileType,arg.fileClass);
if(TypeIsRight == -1){
alert('您当前选择的文件类型不允许上传');
return false;
}
}
//文件为空验证，arg.allowVoid配置是否允许上传文件为空
if (!arg.allowVoid && oFile.size == 0) {
alert('文件为空，请重新选择');
return false;
}
// 对文件大小进行验证
if (oFile.size > arg.fileMaxSize) {
alert('您当前选择的文件过大');
return false;
}
var _form = _upFileSource.parents('form');
Au_upload._filePost(arg,_form,oFile);
}
/*
@_filePost:实例化上传
*/
,_filePost: function(arg,f,oFile){
NOWlOADING = $('.newLoading');
if(NOWlOADING.length != 0){
alert('当前已存在一个上传中的文件');
return false;
}
var _form = $(f);
var updata_list = _form.parents(arg.updataArea).find(arg.updata_list).find('ul'); //通过事件源进行反查找，针对于处理单页面中多个上传元素
var tmpHtml = '';
updata_list.append(tmpHtml);
var siv = window.setInterval(function(){
NOWlOADING = $('.newLoading');
if(NOWlOADING.length > 1){
alert('上传失败，请重试');
return false;
}
if(NOWlOADING.length == 1){
window.clearInterval(siv);
var vFD = new FormData(_form.get(0));
// 创建XMLHttpRequest对象,添加一些事件侦听器,发送数据
XMLHTTP = new XMLHttpRequest();
XMLHTTP.upload.addEventListener('progress', Au_upload._fileProgress, false);
XMLHTTP.addEventListener('load', Au_upload._fileLoad, false);
XMLHTTP.addEventListener('error', Au_upload._fileError, false);
XMLHTTP.addEventListener('abort', Au_upload._fileAbort, false);
XMLHTTP.open('POST', arg.uploadUrl);
XMLHTTP.send(vFD);
var cancelFile = NOWlOADING.find('.'+arg.cancelFile);
cancelFile.unbind('click');
cancelFile.click(function(){
XMLHTTP.abort();
});
}
},100)
}
/*
@_fileProgress:文件上传中
//如果不在环境中，无法获得此状态
*/
,_fileProgress: function(e){
NOWlOADING = $('.newLoading');
var _slider = NOWlOADING.find('.fp_slider');
/*
该方法存在错误现像，暂时未使用
另在文件上传前已经过验证是否为空，
if (!e.lengthComputable) {
alert('这是一个空文件，请重新选择');
NOWlOADING.remove();
return false;
}
*/
if(NOWlOADING.hasClass('hide')){
NOWlOADING.fadeIn(500);
NOWlOADING.remove('hide');
}
iBytesUploaded = e.loaded;
iBytesTotal = e.total;
var iPercentComplete = Math.round(e.loaded * 100 / e.total);
//操作上传进度条
_slider.stop();
_slider.animate({
width:iPercentComplete+'%'
},500);
var iBytesTransfered = Au_upload.bytesToSize(iBytesUploaded);
console.log('上传中..'+iBytesTransfered +'/'+iBytesTotal +'='+iPercentComplete);
}
/*
@bytesToSize:字节转换
*/
,bytesToSize: function (bytes) {
var sizes = ['Bytes', 'KB', 'MB'];
if (bytes == 0) return 'n/a';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
}
/*
@_fileLoad:文件上传完毕
*/
,_fileLoad: function(e){
if(NOWlOADING.length != 1){
alert('上传文件失败，请重试');
return false;
}
//上传成功后，清除上传成功的滑动标识
NOWlOADING.removeClass('newLoading');
var _fileAction = NOWlOADING.find('.cancelFile');
_fileAction.removeClass('cancelFile'); //清除取消标识
_fileAction.text('删除');
_fileAction.unbind('click');
_fileAction.addClass('delFile'); //清除删除标识
var json = jQuery.parseJSON(XMLHTTP.responseText);
_fileAction.attr('fileId',json.fileId);
//文件上传成功后，等待滑动效果完全结束后，隐藏进度条区域
window.setTimeout(function(){
var _filePlan = NOWlOADING.find('.file_plan');
_filePlan.fadeOut(500);
},500);
console.log('文件上传完毕');
}
/*
@_fileError:文件上传失败
*/
,_fileError: function(){
if(NOWlOADING.length == 1){
NOWlOADING.removeClass('newLoading');
NOWlOADING.find('.file_plan').addClass('upload_error');
}
console.log('上传失败');
}
/*
@_fileAbort:文件上传中止
*/
,_fileAbort: function(){
if(!NOWlOADING || NOWlOADING.length == 0){
NOWlOADING = $('.newLoading');
}
NOWlOADING.removeClass('newLoading');
NOWlOADING.find('.file_plan').addClass('upload_error');
console.log('上传终止');
}
/*
@cancelFile:取消正在上传文件
*/
,cancelFile: function(XMLHTTP){
alert('已废弃');
//已废弃
}
/*
@delFile:删除已上传文件
*/
,bind_DelFile: function(arg){
var updataArea = $(arg.updataArea);
var delFile = updataArea.find('.delFile');
delFile.die('click');
delFile.live('click',function(){
var _this = $(this);
var fileId = _this.attr('fileId');
if(!fileId){
alert('删除失败，请重试');
console.log('删除失败：未找到有效的文件ID');
return false;
}
var data = {
fileId : fileId
}
$.post(arg.delFileUrl,data,function(m){
if(m.code != '1'){
alert(m.msg);
console.log('删除失败：由服务器删除失败引发');
return false;
}
var onlyFile = _this.parents('li'); //获取当前删除所在的li节点
onlyFile.fadeOut(500,function(){ //在获得服务器响应后，将节点删除
onlyFile.remove();
})
},'JSON');
});
return true;
}
}