关闭

从0开始使用swfupload详细介绍

标签: swfuploadjs
164人阅读 评论(0) 收藏 举报
分类:

因为公司的业务需要,要对视频进行批量上传,主管让使用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不能续传,停止后不能再开始


 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:20651次
    • 积分:544
    • 等级:
    • 排名:千里之外
    • 原创:33篇
    • 转载:9篇
    • 译文:0篇
    • 评论:3条
    最新评论