`
baukh789
  • 浏览: 27596 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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;
		}
	}
 
分享到:
评论

相关推荐

    springmvc (springboot) 文件上传 Html5上传进度条

    从我的项目中摘出来的,springboot项目,可以拎出来单独运行,全量所有的模块请查看https://gitee.com/zgdong/icustom-boot 如果单独运行请自行修改maven依赖

    HTML5样式的进度条

    HTML5样式的进度条是一种网页元素,用于展示任务或数据加载的进度,为用户提供视觉反馈。随着HTML5标准的发展,开发者可以使用更丰富的样式和功能来定制这些进度条,以增强用户体验。本主题将深入探讨四种不同的...

    Html5炫酷进度条-html5-css3-progress-bar

    在本项目“Html5炫酷进度条-html5-css3-progress-bar”中,我们将探讨如何利用这两种技术来创建一个既实用又具有视觉吸引力的进度条组件。 HTML5的`&lt;progress&gt;`元素是用于显示任意任务的进度的标准化方式。它为用户...

    HTML5百分比进度条.zip

    这是一个标准的HTML5元素,用于表示一个数值范围内的进度,如文件上传或下载的进度。例如: ```html &lt;progress value="50" max="100"&gt;&lt;/progress&gt; ``` 在上面的代码中,`value`属性定义了当前进度,而`max`属性...

    html版进度条进度条

    总之,HTML版的进度条是网页交互设计中不可或缺的一部分,通过HTML5的`&lt;progress&gt;`元素、CSS样式以及JavaScript编程,我们可以创建出美观且实用的进度条组件,用于显示文件上传或其他任务的进度,提升用户的使用体验...

    ajax上传进度条,form上传文件进度条

    HTML5引入了FormData和FileReader API,使得在表单提交时也能获取文件上传进度。表单提交通常涉及一个元素,通过添加enctype="multipart/form-data"属性来支持文件上传。 1. 原理: 表单提交时,浏览器同样会将...

    多款HTML5动态按钮进度条.rar

    在本资源"多款HTML5动态按钮进度条.rar"中,我们聚焦于如何使用这两种技术来创建动态的、吸引人的用户界面元素,特别是按钮上的进度条。这样的设计可以提升用户体验,尤其是在网页加载或执行异步操作时,给用户一个...

    C#批量上传 进度条(包括各种上传例子)

    本压缩包"‘C#批量上传 进度条(包括各种上传例子)’"提供了多种上传方式的示例,包括单文件上传和批量文件上传,并且都带有进度条显示,旨在帮助开发者快速理解和实现这些功能。以下是关于这些知识点的详细介绍: ...

    jquery 上传,批量上传 进度条显示

    当涉及到文件上传,尤其是批量上传和进度条显示时,jQuery 提供了一些强大的插件和方法来实现这些功能。在本篇文章中,我们将深入探讨如何利用 jQuery 实现文件上传,特别是批量上传和进度条显示的技术细节。 首先...

    PHP+Html5上传demo带预览、进度条

    本示例"PHP+Html5上传demo带预览、进度条"就是这样一个实现,它将前端的HTML5特性与后端的PHP处理相结合,提供了文件上传前的预览功能以及上传过程中的进度显示。 **HTML5文件上传** HTML5引入了`...

    h5实现的上传,自带进度条

    总的来说,通过HTML5的File API和JavaScript的XMLHttpRequest2,我们可以实现一个用户友好的文件上传功能,包括进度条显示,从而提升用户体验。这个过程涉及到文件选取、文件读取、上传进度监听和服务器端的文件处理...

    Javascript上传进度条精简实现

    在JavaScript的世界里,实现上传进度条功能是一项常见的需求,尤其在现代Web应用中,用户界面的交互性与体验性越来越受到重视。一个优秀的上传进度条不仅能让用户了解文件上传的状态,还能提供良好的反馈,增强用户...

    基于html5的动态进度条简单案例

    在本案例中,我们探讨的是如何使用HTML5的API创建一个动态进度条,这是一个常见的功能,特别是在文件上传或处理长时间运行任务的Web应用中。HTML5引入了许多新特性,其中就包括`&lt;progress&gt;`元素,它允许我们创建交互...

    Asp.net 上传进度条

    1. **选择合适的控件**:在Asp.net中,我们可以使用第三方控件如Telerik、DevExpress等提供的进度条组件,或者使用HTML5的Progress元素结合Ajax技术来创建自定义的上传进度条。本例中提到的"ProgressBar.dll"可能是...

    js实现文件上传进度条

    在JavaScript中实现文件上传进度条是一项重要的用户交互优化工作,它可以显著提升用户体验,尤其是在处理大文件上传时。本文将深入探讨如何实现这一功能,主要涉及以下几个关键知识点: 1. **进度条的实现**:...

    HTML5 JS ajax 无刷新上传文件 带进度条

    HTML5、JavaScript(JS)和AJAX技术的结合使得现代网页可以实现无刷新上传文件,同时还能展示上传进度条,极大地提升了用户体验。这种技术在Web应用中被广泛应用,特别是那些需要用户频繁上传文件的场景,如社交媒体...

    HTML5带渐变的进度条特效.rar

    在这个名为"HTML5带渐变的进度条特效.rar"的压缩包中,包含了一个使用这两种技术实现的进度条特效,适用于展示网页加载或其他过程的进度。 首先,HTML5引入了`&lt;progress&gt;`元素,用于创建一个可定制的进度条。这个...

    c# 上传文件进度条

    在.NET C#环境中,创建一个文件上传进度条功能是一项常见的需求,特别是在开发Web应用程序时。这个功能能够提供用户友好的体验,让用户了解文件上传的状态,提高交互性。在这个项目中,我们将探讨如何实现这一功能,...

    php文件上传进度条

    在文件上传进度条的实现中,AJAX被用来异步获取服务器端上传进度信息,并实时更新页面上的进度条显示,从而提供更流畅的用户体验。 ### 实现步骤 #### 步骤一:创建UploadProgressMeter类 首先,需要创建一个`...

Global site tag (gtag.js) - Google Analytics