从0开始使用swfupload详细介绍

来源：互联网发布：python 表格控件编辑：程序博客网时间：2024/05/17 23:04

因为公司的业务需要，要对视频进行批量上传，主管让使用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