HTML5 上传 进度条

项目中用到一个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 = '<li class="newLoading hide">'
					+ '<span class="file_name">'
					+ oFile.name
					+ '</span>'
					+ '<div class="file_plan"><span class="fp_slider" style="width:0%;"></span></div>'
					+ '<span class="file_action cancelFile">取消上传</span>'
					+ '</li>';
		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;
		}
	}