swfupload 上传插件

swfupload 上传插件

swfupload的作用：

swfupload和ajaxfileupload的最大不同在于：ajaxfileupload 无法执行取消上传操作而swf可以，并且swf的进度回调不用通过服务器代码来监听通过前端就可以;

SWFUpload包括三部分的内容：SWFUpload.js、swfupload.swf、初始化配置参数及各种事件处理函数。所以首先在页面引入SWFUpload.js 和swfupload.swf",

然后实例化一个SWFUpload对象：

var swfu; window.onload=function(){swfu=newSWFUpload({

upload_url:"/video/uploadNative",

file_post_name:"filedata",

use_query_string:false,

// File Upload Settings

file_size_limit:"1024 MB",//文件大小控制,0代表任意大小

file_types:"*.mp4",

file_types_description:"视频文件",

file_upload_limit:10,//最多能上传多少个

/* file_dialog_start_handler: fileDialogStart,*/

upload_start_handler:beforCheck,

file_dialog_complete_handler:fileDialogComplete,//选择好文件后提交

file_queued_handler:fileQueued,

file_queue_error_handler:fileQueueError,

upload_progress_handler:uploadProgress,

upload_error_handler:uploadError,

upload_success_handler:uploadSuccess,

upload_complete_handler:uploadComplete,

button_placeholder_id:"swfbutton",

button_width:180,

button_height:18,

button_text:'<div class="button_swf"></div>',

button_text_style:'.button_swf {background:#1ebb90;}',

button_text_top_padding:0,

button_text_left_padding:18,

button_window_mode:SWFUpload.WINDOW_MODE.TRANSPARENT,

button_cursor:SWFUpload.CURSOR.HAND,

// Flash Settings

flash_url:rootPath+"/javascripts/swfupload/swfupload.swf",

custom_settings: {

upload_target:"divFileProgressContainer"

},

debug:false//是否显示调试窗口

});

});

重要参数:

upload_url 你的action可以是绝对地址，也可以是相对地址 建议绝对地址; --------- 请求为为ajax

file_post_name 服务器接受参数名称封装 要保持一致

uploadNative(@RequestParam("filedata")MultipartFile file,

post_params 可以设置向服务器发送的参数:

swfu.addPostParam("id",variable);

重要执行流程:

fileQueued(file)/*文件被添加到队列*/ 如果添加了多个 那么会执行多次 该方法

只有 该方法执行完成才会执行fileDialogComplete(numFilesSelected, numFilesQueued)

functionfileDialogComplete(numFilesSelected, numFilesQueued) {

try{

if(numFilesQueued >0) {

this.startUpload();

}

}catch(ex) {

this.debug(ex);

}

}

该方法 配合uploadComplete(file) 遍历执行多个文件上传操作

functionuploadComplete(file) {

if(this.getStats().files_queued > 0) {

this.startUpload();

}else{

$('div.addVideoTc').find('i.close').click();

}

}

上传过程 先执行success 再执行 process 没个文件上传完成执行一次complete

上传过程中可以取消队列中的文件

swfu.cancelUpload(swfId,false);

代码:

functionfileQueueError(file, errorCode, message) {

if(errorCode == -110) {

alert("文件过大!");

}else if(errorCode = -100) {

alert("添加文件过多!");

}

}

/*文件被添加到队列*/

functionfileQueued(file) {

$("div.addVideoTc .protocol_msg").html("");

/*将其div隐藏*/

$(".tcBg").css("width","");

$(".addVideoTc").css("left","-1000px");

/*按钮不可用*/

/*文件开始上传之前的监听*/

varsize= (file.size/1024/ 1024).toFixed(1);

/*显示记录*/

varhtml= "";

html+= "<tr><td width='480'>"+ file.name+"</td>";

html+= "<td width='100'>"+size+ "M"+"</td>";

html+= '<td class="progressbar">'+

'<div style="margin-top:4px; width:150px; display:inline-block;" class="progress progress-striped active mb0 tc_rel" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">'+

'<div class="progress-bar progress-bar-success" style="width:0%;"></div>' +

'<div style="margin-top: 3px;" class="tc tc_pos upload_percent progress-u"></div>' +

'</div>'+

'<span class="rate" style="vertical-align:super; "></span>' +

'</td>';

html+= '<td class="operate">'+

'<a href="javascript:;" onclick="nativecancle(this)" class="btn btn-mini btn-warning delnative swfnotend">取消</a>'+

'</td>';

varvideoTag= $("div.addVideoTc #tag").val();

varitemOneId= $("div.addVideoTc #itemOneId").val();

varitemSecondId= $("div.addVideoTc #itemSecondId").val();

/*名称过长则对其截取*/

if(file.name.length>100) {

file.name= file.name.substring(0,100);

}

insertVideo(html, file.name,size,videoTag,itemOneId,itemSecondId, file);

}

functionfileDialogComplete(numFilesSelected, numFilesQueued) {

try{

if(numFilesQueued >0) {

this.startUpload();

}

}catch(ex) {

this.debug(ex);

}

}

/*进度监听*/

functionuploadProgress(file, complete, total) {

/*进度百分比*/

varcent= ((complete / total) *100).toFixed(1) + "%";

$("#"+"nativId_"+variable).find(".progress-bar-success").css("width",cent);

$("#"+"nativId_"+variable).find(".progress-bar-success").text(cent);

}

functionuploadSuccess(file, server) {

$("table").find("#"+"nativId_"+ server.id).find("td:eq(2)").html("<span >上传完成</span>");

}

functionuploadComplete(file) {

$("table").find("#"+"nativId_"+variable).find("td:eq(3)").html('<a href="javascript:;" onclick="nativedel(this)" nativeId='+variable+' class="btn btn-mini btn-primary delnative">删除</a>');

if(this.getStats().files_queued > 0) {

this.startUpload();

}else{

/*释放按钮*/

$("#addVideoBtn").attr("disabled",false);

$('div.addVideoTc').find('i.close').click();

}

}

functionuploadError(file) {

$("#addVideoBtn").attr("disabled",false);

/*文件上传失败的监听*/

$.ajax({

type:"post",

async:true,

url:rootPath+"/video/updateSwf",

data: {"id":variable,"videoStatus":"VIDEO_PROCESS_FAIL"},

beforeSend:function(XMLHttpRequest) {

},

success:function(result) {

},

complete:function(XMLHttpRequest, textStatus) {

$("table").find("#"+"nativId_"+variable).find("td:eq(2)").html("<span style='color:red;'>" +"上传失败"+"</span>");

$("table").find("#"+"nativId_"+variable).find("td:eq(3)").html('<a href=\"javascript:;\" onclick="nativedel(this)" nativeId='+variable+' class=\"btn btn-mini btn-primary delnative \">删除</a>');

}

});

}

/*每次上传之前的操作*/

functionbeforCheck(file) {

/*根据文件的状态和id获取到本次上传的 数据id*/

varfid= file.id;

varnowid= $("table .swfnotend").parent("[swfid="+fid+ "]").attr("nativeid");

variable=nowid;

/*加入参数id*/

swfu.addPostParam("id",variable);

}

/*向数据库中添加表的记录*/

functioninsertVideo(html, videoName, vodeoSize, videoTag, itemOneId, itemSecondId, file) {

$.ajax({

type:"post",

async:false,

url:rootPath+"/video/insertVideo",

data: {

'itemOneId': itemOneId,

'itemSecondId': itemSecondId,

'videoTag': videoTag,

'videoName': videoName

},

success:function(result) {

if(result.msg=="success") {

html =$(html);

html.attr("id","nativId_"+ result.id);

html.find("td:eq(3)").attr('swfId', file.id);

html.find("td:eq(3)").attr('nativeId', result.id);

variable= result.id;

$("#nativefileuploadtable tbody").append(html);

/*加入变量*/

$("#addVideoBtn").attr("disabled","disabled");

}else{

alert(result.msg);

return false;

}

},

complete:function(XMLHttpRequest, textStatus) {

}

});

}

/*删除本地视频*/

functiondelnative(id) {

$.ajax({

type:"post",

async:true,

url:rootPath+"/video/delNative",

data: {"id": id},

beforeSend:function(XMLHttpRequest) {

},

success:function(result) {

if(result =="success") {

vartrId= "nativId_"+ id;

$("table").find("#"+trId).remove();

alert("视频删除完成");

}else{

alert("视频删除失败");

}

},

complete:function(XMLHttpRequest, textStatus) {

}

});

}

/*取消按钮的页面取消效果*/

functionnativecancle(obj) {

$.confirm("您确定要取消上传吗?",function(b) {

if(b ==true) {

$("#addVideoBtn").attr("disabled",false);

varnativeId= $(obj).parent().attr("nativeId");

varswfId= $(obj).parent().attr("swfId");

/*swf的API删除*/

swfu.cancelUpload(swfId,false);

/*删除本地数据和文件*/

delnative(nativeId);

}

});

}

/*删除按钮*/

functionnativedel(obj) {

$.confirm("您确定要删除吗?",function(b) {

if(b ==true) {

varid= $(obj).attr("nativeId");

delnative(id);

}

});

}