从0开始使用swfupload详细介绍

原创 2015年11月18日 20:53:01

因为公司的业务需要,要对视频进行批量上传,主管让使用swfupload批量进行上传视频,所以就研究了一下,以下为我从开始接触到做好得到的经验

 

首先要想使用swfuload需要去官网下载主要的swfupload.js、swfupload.swf两个文件

如果想对flash9进行支持,则需要下载swfupload_fp9.swf、swfupload.queue.js(此文件具体做什么没研究一块下载下来了)

 

引入js文件后则实例化一个swfupload对象

var upload;
	var num=0;//用于统计上传的数量,当删除的时候会减掉
	var successNum=0;//用于统计成功的数量
	
	window.onload = function(){
	        var iTime = ""; //使用时间
            var Timeleft = ""; //剩余时间
           var settings2 = {
              flash_url: "../../swfupload/swfupload.swf",
              flash9_url: "<%=Const.STATIC_RESOURCE_PREFIX %>swfupload_fp9.swf",
              upload_url: "http://192.168.0.1/admin/Upload.do",//要上传的文件的地址
              file_size_limit: "1024 MB",//上传文件大小的限制
              file_types: "*.avi;*.mp4;*.flv;*.wmv",//上传文件的格式
              file_post_name: "myFile",
              post_params: {"lineType": "name"},
              file_types_description: "myFile",
              file_upload_limit: 10,//限制上传的数量
              file_queue_limit: 10,//队列的数量
              debug: false,//是否开启调试
              // Button settings
              button_image_url: "http://res.kanglaohui.com/st/klh_v1/img/uploadBtn.jpg",
              button_width: "120",
              button_height: "35",
              button_placeholder_id: "programPosterCreate2",//html中对应的ID
              button_window_mode:'opaque',//不透明,弹出界面时是暗的
              button_text: '',
              button_text_top_padding: 3,
              button_action:SWFUpload.BUTTON_ACTION.SELECT_FILES,//可以多选
              file_queued_handler : file_queued_function2,//选择文件,放入上传队列里面后执行的事件
              upload_complete_handler: myUploadPosterCompletr2,//文件从本地都上传到服务器后执行的事件
              upload_success_handler: myUploadPosterSuccess2,//文件保存到服务器后,服务器返回数据后执行的事件
              upload_progress_handler: uploadProgress2,//文件上传中执行的事件,此处加进度条
              upload_start_handler:uploadStartHandler,//文件开始上传后执行的事件
              upload_error_handler:uploadError,//文件上传中出错执行的事件,服务器异常进行处理
              file_dialog_complete_handler: myFileDialogPosterComplete2,//选择文本框关闭时执行的事件
              file_queue_error_handler: myFileQueuePosterError2//文件上传前出错执行的事件,用于提升用户上传文件大小的限制和名字的限制
          }; 
		
		        upload = new SWFUpload(settings2);
		        
		        function uploadError(file,errcode,msg){
			    	switch(errcode) {
	        		case -200:
	        			alert("服务器异常!请稍后重试!");
	        			break;
	        		}
		        }


下面是一些事件,本人没有使用通过的那些进度条,而是公司前端做的,代码有删改,要实现批量上传并对应每一个进度条中的文件上传大小,进度,,上传速度,和剩余时间全部在一个form中使用唯一的id为file.id就,也可以在ID后加你需要的ID,如下所示

 function myUploadPosterCompletr2(file) {

			    }
			    function myUploadPosterSuccess2(file, serverData) {
			    	var json = eval("(" + serverData + ")");//获取服务器返回的数据
			        if (json.rs == 1) {
			        	successNum+=1;//返回成功则成功的数量+1
			        	$("#successNum").html(successNum);
			        	$("#"+file.id).siblings(".areadyUploadSize").html("已完成");
			            name = json.paths[0];
			            $("#"+file.id+"name").val(name);
			            var uuid=$("#"+file.id+"uuid").val();
			        	$.ajax({
			        		type:"POST",
			        		dataType:"json",
			        		url:"/upload/upload.do",
			        		data:{"name":portrait,"uuid":uuid},
			        		success:function(data){
			        			$("#"+file.id+"uuid").val(data.uuid);
			        		},error:function(){
			        			alert("服务器异常,请稍后重试!");
			        		}
			        	});
			        }else{
			        	$("#"+file.id).siblings(".areadyUploadSize").html(json.msg);
			        }
			    }
			    
				//用于计算时间
			    function uploadStartHandler(){
			    	var currentTime = new Date()
					iTime = currentTime;
					Timeleft = "计算中...";
			    }
			    
			    function uploadProgress2(file, bytesLoaded,bytesTotal) {
			    	 try {
			    		 var currentTime = new Date();//获取当前时间
			    		 var tempTime = 0;
			    		 
			    		 var fileSize=roundNumber(file.size/(1024),0);//文件的大小
			    		 var uploaded = roundNumber((bytesLoaded/1024),0);//已经上传的
			    		 var percent = Math.ceil((bytesLoaded / file.size) * 100);//已经上传的百分比
			    		 var uTime = (Math.ceil(currentTime-iTime)/1000);//已经使用的时间
		    			 var uSpeed = Math.floor(roundNumber(((bytesLoaded/uTime)/1024),0));//速度
		    			 uTime = "用时" + minsec("m", tempTime) + "分:" + minsec("s", tempTime) + "秒";
	    				 //tempTime = reassign val
	    				 tempTime = roundNumber(((((bytesTotal-bytesLoaded)/uSpeed)/60)/10),2);
			             if (percent === 100) {//上传完成
			            	 $("#"+file.id).siblings(".areadyUploadSize").html("100%");
			            	 $("#"+file.id).parents(".ddb").siblings(".dda").children(".bga").children(".bgb").attr("style","width:100%");
			            	 $("#"+file.id).children(".fileSize").html(fileSize+"KB/"+fileSize+"KB");
			            	 $("#"+file.id).children(".fileSpeed").html("0 KB/s");
			            	 $("#"+file.id).children(".fileTime").html("0分0秒");
			             }
			            //显示上传信息
			            else {
			            	$("#"+file.id).siblings(".areadyUploadSize").html(percent+"%");
			            	$("#"+file.id).parents(".ddb").siblings(".dda").children(".bga").children(".bgb").attr("style","width:"+percent+"%");
			            	$("#"+file.id).children(".fileSize").html(uploaded+"KB/"+fileSize+"KB");
			            	$("#"+file.id).children(".fileSpeed").html(uSpeed+"KB/s");
			            	$("#"+file.id).children(".fileTime").html(minsec("m", tempTime) + "分:" + minsec("s", tempTime) + '秒');
			            	
			            }
			         } catch (ex) {
			             this.debug(ex);
			         }
			    }
			    
			    function myFileDialogPosterComplete2(file){
			    	try {
			    		upload.startUpload(file.id);//开始上传
			        } catch (ex) {
			            this.debug(ex);
			        }
			    }
			    
			    function file_queued_function2(file, queuelength) {
					$("#twoChoose").show();
					num+=1;
					$("#insertForm").before("<form
					"<div class=\"video_u_gmboxa\"><a href=\"javascript:;\" onclick=\"deleteVedio(this,'"+file.id+"');\" class=\"colse_u\"></a>"+
				    '<dl><dt>'+num+'.'+file.name+'</dt><dd class="dda"><div class="bga"><div class="bgb" style="width:0%""></div></div></dd><dd class="ddb" style="padding:0 0 4px"><i>'+
				    "<input type=\"button\" style=\"display:none;\" id=\""+file.id+"cancel\" value=\"停止上传\"/>"+
				    '</i><i class="areadyUploadSize">0.00%</i><span id="'+file.id+'">已上传:<em class="fileSize">0/'+getNiceFileSize(file.size)+'</em>上传速度:<em class="fileSpeed"></em> 预计剩余时间:<em class="fileTime"></em></span></dd>'+
				    '</dl><a href="javascript:;" class="zhankai_u"></a><div class="video_u_inboxa"><table border="0" cellspacing="0" cellpadding="0" class="tab_video">'+
				    ' </table></div></div></form>'); 
					$("#num").html(num);
					$("#successNum").html(successNum);
					$("#" + file.id + "cancel").click(function(e) {//用于取消上传
						upload.cancelUpload(file.id,false);  
				    });
			    }
			    
			    function myFileQueuePosterError2(file,errcode,msg) {
			    	switch(errcode) {
	        		case -110:
	        			alert(file.name+"文件大小受限制, 文件大小: " + roundNumber(file.size/1024/1024,1) +"M,不要超过"+upload.settings['file_size_limit']);
	        			break;
	        		}
			    }
	};
	//用于计算时间
	function minsec(time, tempTime) {
		var ztime;
		if (time == "m") {
		   ztime = Math.floor(tempTime/60);
		   if (ztime < 10) {
		    ztime = "0" + ztime;
		   }
		} else if (time == "s") {
		   ztime = Math.ceil(tempTime % 60);
		   if (ztime < 10) {
		    ztime = "0" + ztime;
		   }
		} else {
		   ztime = "minsec error...";
		}
		return ztime;
	}
	
	//截取修改显示的数字
	function roundNumber(num, dec) {
		var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
		return result;
	}
	
	var _K = 1024;
	var _M = _K*1024;
	function getNiceFileSize(bitnum){
		if(bitnum<_M){
			if(bitnum<_K){
				return bitnum+'B';
			}else{
				return Math.ceil(bitnum/_K)+'K';
			}
			
		}else{
			return Math.ceil(100*bitnum/_M)/100+'M';
		}
		
	}

注意swfupload不能续传,停止后不能再开始


 

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

SWFUpload的初始化与配置

SWFUpload的初始化与配置 首先,在页面中引用SWFUpload.js ,如 然后,初始化SWFUpload ,如 var swfu; window.onload = funct...
  • hezhipin610039
  • hezhipin610039
  • 2014年04月29日 09:55
  • 5687

SWFUpload学习记录

转载自: http://blog.csdn.net/zhyh1986/article/details/7926166
  • hi_kevin
  • hi_kevin
  • 2014年04月11日 11:03
  • 18586

swfupload2_2上传视频的实现

1、
  • aoxiang94
  • aoxiang94
  • 2015年05月22日 17:42
  • 649

swfupload删除已经上传的文件队列中特定的文件

swfupload上传文件中会生成一个队列,记录已经上传的文件. 而当用户用删除某个已经上传的文件时就显得有点麻烦,而且如果在设置中已经设定只能上传一个文件的话,即使取消了已经上传的文件,当你再继续上...
  • cleans
  • cleans
  • 2013年04月04日 23:52
  • 1573

springMvc+swfUpload实现异步文件上传(前台用纯html后台返回json)

前台页面: HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> SWFUpload Demos href="css/defau...
  • fengqilove520
  • fengqilove520
  • 2016年11月03日 10:08
  • 1045

“上传图片到服务器”之SWFUpload的使用

SWFUPload组件利用Flash自身文件提交技术而无需刷新页面,而且能够获取文件上传的进度,可以提交多个文件,而且还能控制上传文件的大小、类型等信息。...
  • sbyygyrgw555
  • sbyygyrgw555
  • 2013年11月02日 23:02
  • 2534

教你使用swfupload带进度条多文件上传

首先我们直接去github搜索swfupload.下面是下载地址 https://github.com/danifbento/SWFUpload 下载好了以后我们只需要swfuploa...
  • dong_18383219470
  • dong_18383219470
  • 2017年04月27日 14:18
  • 794

springMVC + swfupload 附件上传功能的实现

flash_url : "${ctx}/resources/plugins/swfupload/swfupload.swf", //这个是指定swfupload 的 swf的flash的地址 ...
  • houpengfei111
  • houpengfei111
  • 2013年07月18日 18:46
  • 7508

多个swfupload实例上传图片,缩略图

先生成一个swfupload实例          var swfu_0 = new SWFUpload({ // Backend Settings ...
  • u010540235
  • u010540235
  • 2015年04月29日 17:58
  • 449

EXT3+swfUpload同时上传多个附件

EXT3+swfUpload同时上传多个附件
  • u013365569
  • u013365569
  • 2016年05月10日 10:17
  • 902
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从0开始使用swfupload详细介绍
举报原因:
原因补充:

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