从0开始使用swfupload详细介绍
因为公司的业务需要，要对视频进行批量上传，主管让使用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("注意swfupload不能续传，停止后不能再开始
谢谢支持，多少都行
