【第22期】观点:IT 行业加班,到底有没有价值?

上传组件uploadify封装

原创 2015年07月10日 09:25:40

第一次进行jquery组件封装,为了使用方便,提供了普通上传,上传单张图片,视频; 上传多张图片,视频;队列上传的方法:

/*
上传组件的封装
*/

(function($) {
	var template='<div id="${fileID}" class="uploadify-queue-item">\
					<div class="cancel">\
						<a href="javascript:$(\'#${instanceID}\').uploadifyfile(\'cancel\', \'${fileID}\')">X</a>\
					</div>\
					<span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\
					<div class="uploadify-progress">\
						<div class="uploadify-progress-bar"><!--Progress Bar--></div>\
					</div>\
				</div>';
	
	var defaultConstants={
			swf      : 'uploadify/js/uploadify.swf', //swf的路径
			uploader : '',  						 //实际的上传路径的动作
			
			itemTemplate    : template,				 //上传项模板
			auto            : true,                  
			multi           : true,               	
			
			fileSizeLimit   : 0,                  	//上传大小限制
			fileTypeExts    : '*.*',              	//上传后缀名
	
			buttonText      : '上传文件',     		  				
			height          : 30,                 
			width           : 120, 
			progressData    : 'percentage',
			
			removeCompleted : false,               	//上传后,文件不自动隐藏
			uploadLimit     : 10,                  
			onUploadSuccess : function(file,data,response){
			}	
	};
	var video='*.avi; *.mp4; *.mov; *.wmv; *.flv; *.swf; *.mkv; *.rm; *.rmvb';
	var img='*.gif; *.jpg; *.png; *.bmp; *.jpeg';
	
	var methods = {
		//默认执行方法
		init : function(options) {
			var $this = $(this);	
			var settings = $.extend(defaultConstants,options);		
			$("#" + $this.attr('id')).uploadify(settings);		
			return this.each(function() {
			});
		},
		
		//上传当个图片
		uploadImg : function(options){
			var $this = $(this);
			var id=$this.attr('id');
			var defaults={
				multi           : false,              	
				fileSizeLimit   : '1MB',                
				fileTypeExts    : img, 
				buttonText      : '上传图片'  
			};
			var settings = $.extend($.extend(defaultConstants,defaults),options);				
			var successCallback = settings.onUploadSuccess;
			settings.onUploadSuccess = function(file,data,response){
				successCallback(file,data,response);
				$("#" + id).uploadify('disable', true);
			};
			
			$("#" + id).uploadify(settings);		
			return this.each(function() {
			});
		},
		
		//上传多个图片
		uploadImgMulti : function(options){
			var $this = $(this);
			var defaults={
				fileSizeLimit   : '1MB',                 
				fileTypeExts    : img,
				buttonText      : '上传图片'        
			};			
			var settings = $.extend($.extend(defaultConstants,defaults),options);		
			$("#" + $this.attr('id')).uploadify(settings);		
			return this.each(function() {
			});
		},
		
		//上传单个视频
		uploadVideo : function(options){
			var $this = $(this);
			var id = $this.attr('id');
			
			var defaults={				
				multi           : false,          
				fileSizeLimit   : '100MB',               
				fileTypeExts    : video,
				buttonText      : '上传视频'           
			};			
			var settings = $.extend($.extend(defaultConstants,defaults),options);	
			var successCallback = settings.onUploadSuccess;
			settings.onUploadSuccess = function(file,data,response){
				successCallback(file,data,response);
				$("#" + id).uploadify('disable', true);
			};
			
			$("#" +  id).uploadify(settings);				
			return this.each(function() {
			});		
		},
		
		//上传多个视频
		uploadVideoMulti : function(options){
			var $this = $(this);
			var defaults={
				fileSizeLimit   : '100MB',                  
				fileTypeExts    : video,  
				buttonText      : '上传视频'      
			};			
			var settings = $.extend($.extend(defaultConstants,defaults),options);	
			$("#" +  $this.attr('id')).uploadify(settings);		
			return this.each(function() {
			});	
		},
		
		//上传队列
		uploadQueue : function(options){
			var $this = $(this);
			var defaults={
				auto            : false,               
				buttonText      : '队列上传'          
			};			
			var settings = $.extend($.extend(defaultConstants,defaults),options);		
			$("#" +  $this.attr('id')).uploadify(settings);		
			return this.each(function() {
			});	
		},
		cancel : function(fileID) {
			var $this = $(this);
			var id = $this.attr('id');
			$("#" + id).uploadify('disable', false);
			$("#" + id).uploadify('cancel',fileID);
		},	
	};
	
	$.fn.uploadifyfile = function(method) {
		if (methods[method]) {
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if (typeof method === 'object' || !method) {//如果没有制定的方法,直接使用init
			return methods.init.apply(this, arguments);
		} else {
			$.error('The method ' + method + ' does not exist in $.uploadify');
		}
	};
})($);


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

JQuery uploadify 上传通用组件封装

uploadify.jsp [code="html"] <link href="/res/js/widget/jquery/uploadify.css" rel=

JQuery uploadify上传组件的使用方法

基于jQuery上传组件非常多,其中uploadify是其中比较优秀并且好用的,可以完美支持PHP以及其他编程语言。此外,uploadify结合flash进行上传,如果对fla文件进行修改和重新编译的...
  • F7ANTY
  • F7ANTY
  • 2012-08-21 20:19
  • 1027

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

请慎用Uploadify文件上传组件

uploadify 的内部实现其实就是 用了 swfupload,而且封装的糟糕透顶,异常判断一趟糊涂,代码也写的够老呛,而且配置太乱。   之前用过 uploadify,发现了不少 bug,不得不修改了它的源码才能勉强工作,实在让人崩溃。   昨天在一个新的工程里试用了...

asp.net(c#)开发中的文件上传组件uploadify的使用方法(带进度条)

在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作。在目前Web开发中用的比较多的,可能uploadi...

在Struts2中使用Uploadify组件上传文件

Uploadify是一个基于Jquery的文件上传组件,官网http://www.uploadify.com/可以在官网获得该组件,运行演示示例,下载帮助文档。     作为Web前端的增强技术,Jquery给用户以更好的体验和交互,增强富互联网客户端特效,而基于Jqu...
  • gaoyu
  • gaoyu
  • 2014-01-18 23:48
  • 2487
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)