swfupload

 

私人总结以及使用.

 

页面中也用swfupload.js,加入相应的文件夹

还有标签

${subinfo_index}的意思是list中的次数依次叠加1,2,3......如果有多个实例的话，能用到，一个的话就不用了，实例中的参数也不用写了，还有index.

<div id="uploadFileShowUL${subinfo_index}"></div>

<script type="text/javascript">

 initSerFlow_upload(${subinfo_index});

</script>

 

<input id="fileName${subinfo_index}" name="fileName${subinfo_index}" " type="hidden">

<input id="uniqueName${subinfo_index}" name="uniqueName${subinfo_index}" " type="hidden">

<input id="fileSize${subinfo_index}" name="fileSize${subinfo_index}" " type="hidden">

<input id="filePath${subinfo_index}" name="filePath${subinfo_index}" " type="hidden">

 

<b id="spanButtonPlaceholder${subinfo_index}"></b>

//上传上的每个文件都有进度条的话，只要这个，这个demo就是每个文件都有进度条,页面不需要，js中添加

 

//只有一个进度条的话，页面添加

<div style="overflow:hidden;">

 <div id="divFileProgressContainer" style="left"></div>

</div>

<b id="spanButtonPlaceholder${subinfo_index}"></b>

 

<div id="progressbar" class="progress-bar-ser"><span id="schedule" class="schedlue"></span></div>

<p class="progress-nb" id="progress"></p>

 

 

 

 

在加入一个serflow_submit_info.js里面是swfupload的实例以及其他方法

 

/**公共方法*/

//校验特殊字符

function checkStr(s,patten){

  if(patten =="" || patten==null){ patten=new RegExp("[~'!@#$%^&*()-+_=:]");}

  if(s !="" && s!=null){

   if(patten.test(s)==false){return false;}else{ return true;}

}

}

//截取过长的文件名称

functin subFileName(fileName,num){

 var subName="";

 if(fileName.length>num){subName=fileName.substring(1,num)+"..."}else{

subName=fileName;

}

return subName;

}

 

//格式化文件大小单位

function formatBytes(value){

  if(null==value || value==""){ return "0 Bytes";}

  var unitArr =new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");

  var index=0;

 var srcsize=parseFloat(value);

 var quotient=srcsize;

 while(quotient>1024){

  index+=1;

  quotient=quotient/1024;

}

//return Math.floor(quotient,2)+" "+unitArr[index];

return quotient.toFixed(2)+" "+unitArr[index];

}

 

/**附件上传开始swfupload*/

var swfu =new Array();//全局

var fileType="*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.pdf;*.txt;*.jpg;*.JPG;*.bmp;*.BMP;*.png;*.PNG;*.jpeg;*.JPEG";

function initSerFlow_upload(index){

 swfu[index] =new SWFUpload({

     upload_url : "uploadFile.do",//上传到control，方法上传

     file_size_limit: '5120',//5MB

     file_types:fileType;//上传类型

     file_types_description:"所有文件";

     file_post_name: "ecspfile";

    post_params :{

    "operator":userId,//获取当前用户id  

   "format" :"*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.pdf;*.txt;*.jpg;*.JPG;*.bmp;*.BMP;*.png;*.PNG;*.jpeg;*.JPEG";//暂不用

},

   file_upload_limit:"0",//上传文件队列多0个（o代表不受限制）

   file_queue_error_handler: fileQueueError,//选择文件后出错

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

  file_queued_handler: fileQueued,

  upload_start_handler: uploadStart,

  upload_progress_handler:uploadProgress,

//upload_error_handler: uploadError,

 upload_success_handler: uploadSuccess,

 upload_complete_handler: uploadComplete,

  swfupload_loaded_handler : loadedInit,

  button_image_url:"/img/upload_attch.png",//按钮背景

  button_placeholder_id:"spanButtonPlaceholder"+index,

  button_width:134,

  button_height:13,

  //button_text_top_padding:1,

   // button_text_left_padding:1,

 button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,

 button_cursor: SWFUpload.CURSOR.HAND,

 button_action: SWFUpload.BUTTOn.ACTION.SELECT_FILE,//上传选择文件只能单选

 use_query_string:true,

 flash_url: "/swfupload/swfuoload.swf",

custom_settings:{

   upload_target: "divFileProgressContainer"+index,

   experIndex:index//参数

},

 debug:false

//是否显示调试窗口

});

]

 

 

//上传文件

function fileDialogComplete(numFileSelected, numFilesQueued, numFilesInQueue){

 var experIndex=this.customSettings.experIndex;//获取实例的参数

 $("#schedule"+experIndex).attr('style','width:0%',);

 $("#progressbar"+experIndex).css("visibility","visible");

}

 

function loadedInit(){

 //如果初始化加载实例需要操作的话，这里执行

}

 

//开始上传

 

function uploadStart(file){

 var experIndex=this.customSettings.experIndex;//获取实例的参数

 var stats=swfu[experIndex].getStats();

 swfu[experIndex].setButtonDisabled(true);

 var fileName=$("#fileName"+experIndex).val().split(",");

 if(checkStr(file.name)==true){

  alert("附件名称还有非法字符(~'!@#$%^&*()-+_=:)");

  clearFileQueued(file,experIndex);

  swfu[experIndex].setButtonDisabled(false);

  return false;

} else if(fileName!=file.name && index==10 && unqiqueNameFile==undefined){//不是覆盖

createUploadFileUIDom(file,"wangyf2",experIndex);

}

}

 

//上传进度条.每个文件都有自己的进度条

function uploadprogress(object,complete,bytes){

 var experIndex=this.customSettings.experIndex;

 var stats=swfu[experIndex].getStats();

$("#schedule"+experIndex+object.id).attr("style",'width:'+(complete/bytes*100)+'%');

$("#progress"+experIndex+object.id).html("上传中("+Math.floor(complete/bytes*100)+")%");

}

 

//上传一个文件成功后，触发的事件

function uploadComplete(file){

 var experIndex=this.customSettings.experIndex;

 try{

}catch(ex){

 this.debug(ex);

}

}

 

//上传成功后

var index=10;

var fileUnqueName="";

function uploadSuccess(file,serverData,responseReceived){

 var experIndex=this.customSettings.experIndex;

 var result=$.parseJSON(eval(serverData));

 var fileName=$("#fileName"+experIndex).val().split(",");

//储存的真实名字

var uniqueName=$("#uniqueName"+experIndex).val().split(",");

var stats=swfu[experIndex].getStats();

if(result.retCode=="000000"){

  fileUnqueName=result.ecspFileInfo.uniqueName;

 //累加文件名称

  addUploadFileName(uniqueName,fileUnqueName,fileName,file,experIndex);

 

//也可以成功后创建文件

//createUploadFileUIDom(file,uniqueName,experIndex);

//只有一个，覆盖后的，存在文件的唯一名称

if(fileName!=file.name && index==10 && unqiueNameFile==undefined){

  //处理fileUnqueName

 $("a").each(function(){

  if($(this).attr("onclick")!="" && $(this).attr("onclick")!=undefined && $(this).attr("onclick").indexOf(file.name)>0){

  var onck=$(this).attr("onclick").replace("wangyf2",uniqueName);

  $(this).attr("onclick",onck);

}

});

 

$("#schedule"+experIndex+file.id).attr('style','width:100%');

$("#progress"+experIndex+file.id).html("上传中("+"100%)");

$("#progress"+experIndex+file.id).removeClass("mr15");

alert("上传成功");

}else {//文件覆盖

 

$("#schedule"+experIndex+file.id).attr('style','width:100%');

$("#progress"+experIndex+file.id).html("100%");

unqiqueNameFile=undefined;

index=10;

}

setTimeout(function(){

$("#schedule"+experIndex+file.id).css('visibility',hidden');

$("#progress"+experIndex+file.id).attr("style","display:none");

$(".progress-nb").html();

},500);

 

}else if (result.retCode=="999007"){

//处理文件格式不正确后的数量限制

stats.successful_uploads--;

swfu[experIndex].setStats(stats);

alert("文件格式不正确");

 

setTimeout(function(){

$("#progressbar"+experIndex+file.id).css("'visibility'","hidden'");

$("#schedule"+experIndex+file.id).attr("style","display:none");

$(".progress-nb").html();

},500);

}

 

swfu[experIndex]..setButtonDisabled(false);

//限制数量

if(stats.successful_uploads>=1 && stats.successful_uploads<=2){

swfu[experIndex].setButtonImageURL("/img/continue_upload.png");//换背景

swfu[experIndex].setButtonDisabled(false);

}else if(stats.successful_uploads>=3){

swfu[experIndex].setButtonImageURL("/img/continue_upload.png");//换背景

swfu[experIndex].setButtonCursor(SWFUpload.CURSOR.ARROW);//鼠标属性

swfu[experIndex].setButtonDisabled(true);//不能点击

}

}

 

function getReurnPath(file,serverData){

 if(responsePaths==""){

 responsePath=responsePath+serverData;

}else{

 responsePath=responsePath+","+serverData;

}

}

 

 

function startUploadFile(){

 var experIndex=this.customSettings.experIndex;

swfu[experIndex].startUpload();

}

 

function fileQueueError(file,code,message){

 if(file.size==0){

 alert("不能上传文件大小为0MB的文件");return;

}

if(code==SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT){

alert("所选文件超过指定大小，最大支持5M");return;

}

}

 

/**

function fileQueueError(file,code,message){

try{

 switch(code){

case  SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:

expecialShowMsg("不能上传文件大小为0MB的文件");

break;

case  SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:

expecialShowMsg("所选文件超过指定大小，最大支持5M");

break;

case  SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:

expecialShowMsg("所选文件类型不正确");

break;

default:

expecialShowMsg(message);

break;

}

}catch(ex){

this.debug(ex);

}

}

*/

 

 /**清空文件上传列队*/

 function clearFileQueued(file,experIndex){

swfu[experIndex].customSettings.queue=swfu[experIndex].customSettings.queue || new Array();

swfu[experIndex].cancelUpload(swfu[experIndex].customSettings.queue.pop(),false);

}

 

function fileQueued(file){

  var experIndex=this.customSettings.experIndex;

  var uploadFileName=file.name;

  var fileAllSize=$("#fileAllSize"+experIndex).val();//获取文件上传的总大小

 fileAllSize=parseInt(fileAllSize)+parseInt(file.size);//当前文件大小+已上传文件总大小

if(fileAllSize>5242880){//5MB

  //清空上传队列

  clearFileQueued(file,experIndex);

alert("上传文件总容量不能大于5M");

return ;

}

//储存已上传文件大小

$("#fileAllSize"+experIndex).val(fileAllSize);

 

//如果不存在同名文件，直接上传

var checkFlag=checkUploadFileName(uploadFileName,experIndex);

if(checkFlag==false){

 swfu[experIndex].startUpload();

}else{

  confim("提示",'已包含一个名为"'+subFileName(uploadFileName,25)+'"的文件,是否覆盖？',"确定","取消",function(){

 //删除存在的文件，再上传当前文件

  //var index;

  var indexValue;

var SerAttrs=new Array();

 realizeSerAttrs=$("#fileName"+experIndex).val().split(",");

 for(var i=0,i<realizeSerAttrs.length;i++){

 if(realizeSerAttrs[i]==uploadFileName){index=i;}

}

var SerImg=new Array();

SerImg=$("#uniqueName"+experIndex).val().split(",");

 for(var j=0,i<SerImg.length;j++){

 indexValue=SerImg[index];

}

deleteUploadFile(uploadFileName,indexValue,experIndex);

},function(){

//清空上传列队

 clearFileQueued(file,experIndex);

})

 }

}

 

//从上传文件列表中删除所选择的文件

function deleteUploadFile(uploadFileName,uniquName,experIndex){

var fileNames=$("#fileName"+experIndex).val();

var fileNamesArray=fileNames.split(",");

//如果只有一个文件，直接清空列表

 if(fileNamesArray.length==1){

//执行删除文件操作

  subdeleteUploadFile(-1,fileNamesArray,uniquName,experIndex);

}else{

 for(var i=0;i<fileNamesArray.length;i++){

  if(fileNamesArray[i]==uploadFileName){

//执行删除文件操作

  subdeleteUploadFile(i,fileNamesArray,uniquName,experIndex);

break;

}

}

}

 

}

 

//覆盖删除操作

function   subdeleteUploadFile(i,fileNamesArray,uniquName,experIndex){

//执行删除文件上传

$.ecspCORS.invokeCORSGet(ECSP_UPLOAD_URL+"/delete/"+uniqueName+".do",function(respionseText){

  var result=$.parseJSON(eval(respionseText));

  if(result.retCode=="000000"){

    var stats=swfu[experIndex].getStats();

   stats.successful_uploads--;

   swfu[experIndex].setStats(stats);

   swfu[experIndex].startUpload();

}

})

}

 

//累加上传的文件名称

var unqiueNameFile;

function addUploadFileName(uniqueName,uniqueNameValue,fileName,file,experIndex){

if(fileName==""){

 $("#fileName"+experIndex).val(file.name);

 $("#uniqueName"+experIndex).val(uniqueNameValue);

}else{//删除数组中的重复记录，

var flag=false;

 for(var i=0;i<fileName.length;i++){

  if(fileName[i]==file.name){

 index=i;

flag=true;

break;

}else{

continue;

}

}

if(flag==false){

fileName.push(file.name);

uniqueName.push(uniqueNameValue);

}else{

//修改唯一名称

   var indexValue=uniqueNameValue;

  for(var j=0;j<uniqueName.length;j++){

 if(j==index){

uniqueNameFile=uniqueName[index];

uniqueName[index]=indexValue;

}

}

}

 

if(uniqueNameFile!=undefined){//覆盖后删除，修改删除按钮参数

 $("a").each(function(){

  if($(this).attr("onclick")!="" && $(this).attr("onclick")!=undefined && $(this).attr("onclick").indexOf(uniqueNameFile)>0){

  var onck=$(this).attr("onclick").replace(uniqueNameFile,uniqueNameValue);

  $(this).attr("onclick",onck);

}

});

}

 

 $("#fileName"+experIndex).val(file.name.toString());

 $("#uniqueName"+experIndex).val(uniqueName.toString()););

}

}

 

//校验文件上传是否存在同名文件

function checkUploadFileName(uniqueFileName,experIndex){

var  checkFlag="";

var fileNames= $("#fileName"+experIndex).val();

if(fileNames=="" || fileNames==undefined){

 checkFlag=false;

}else{

  var fileNamesArray=fileNames.split(",");

var namesSize=fileNamesArray.length;

 for(var i=0;i<namesSize;i++){

 if(fileNamesArray[i]==uploadFileName){

 return checkFlag=true;

}else{

 checkFlag=false;

}

}

}

return checkFlag;

}

 

//动态创建上传文件显示列表

var times="";

function creatUploadFileUIDom(file,uniqueName,experIndex){

//根据不同的文件类型显示图片

var imgSrc="";

if(file.type==".doc" || file.type==".docx"){

imgSrc="file_word";

}else if(file.type==".pptx" || file.type==".ppt"){

imgSrc="file_ppt";

}else if(file.type==".xls" || file.type==".xlsx"){

imgSrc="file_excel";

}else if(file.type==".pdf"){

imgSrc="file_pdf";

}else if(file.type==".txt"){

imgSrc="file_txt";

}else if(file.type==".jpg" || file.type==".bmp" || file.type==".png" || file.type==".jpeg"   ){

imgSrc="file_img";

}else if(file.type==".zip" || file.type==".rar"  ){

imgSrc="file_ys";

}else{

 imgSrc="file_pt";

}

 

//获取当前系统时间戳

var timestamp=new Date().getTime();

var deleteUploadFileFun="deleteUploadFileUIDom('"+file.name+"','"+timestamp+"','"+uniqueName+"','"+experIndex+"');";

times=timestamp;

//创建上传文件列表

var showStr="";

showStr+='<li id='+timestamp+'>';

showStr+="<div class='file_icon"+imgSrc+"'></div>";

showStr+="<div class='media-body'>";

showStr+="<p class="file_name"> <span class='font_h'>" +subFileName(file.name,25)+"</span>&nbsp;";

showStr+="<span class='grys'>(" +formatBytes(file.size)+")" +"</span></p>";;

showStr+="<p>";

showStr+='<span class=" grys progress-nb mr15" id="progress'+experIndex+file.id+'"></span>';

showStr+='<a onclick="'+deleteUploadFileFun+'" class="font_blue">删除</a>';

showStr+="<p>";

showStr+="</div></li>";

  if($("#uploadFileShowUI"+experIndex).html()==""){

 $("#uploadFileShowUI"+experIndex).html(showStr);

}else{

$("#uploadFileShowUI"+experIndex).append(showStr);

}

}

 

//从上传文件列表中删除所选择的文件

function deleteUploadFileUIDom(uploadFileName,deleteLiId,uniquName,experIndex){

var fileNames=$("#fileName"+experIndex).val();

var fileNamesArray=fileNames.split(",");

//如果只有一个文件，直接清空列表

 if(fileNamesArray.length==1){

//执行删除文件操作

  submitDeleteUploadFile(-1,fileNamesArray,deleteLiId,uniquName,experIndex);

}else{

 for(var i=0;i<fileNamesArray.length;i++){

  if(fileNamesArray[i]==uploadFileName){

//执行删除文件操作

  submitDeleteUploadFile(i,fileNamesArray,deleteLiId,uniquName,experIndex);

break;

}

}

}

 

}

 

//删除文件服务器上的资料

function   submitDeleteUploadFile(arrayIndex,fileNames,deleteLiId,uniquName,experIndex){

//执行删除文件上传

confim("删除附件","确定删除附件?","确定","取消",function(){

$.ecspCORS.invokeCORSGet(ECSP_UPLOAD_URL+"/delete/"+uniqueName+".do",function(respionseText){

  var result=$.parseJSON(eval(respionseText));

  if(result.retCode=="000000"){

 

 var inputValut="";

var uniqueNameValue="";

var uniqueNameArray=$("uniqueName"+experIndex).val().split(",");

for(var i=0;i<uniqueNameArray.length;i++){

  if(uniqueNameArray[i]==uniqueName){continue;}else{

 uniqueNameValue+=uniqueNameArray[i]+",";

}

}

 

if(uniqueNameValue!=""){

 uniqueNameValue=uniqueNameValue.substring(1,uniqueNameValue.length-1);

}

 

$("#uniqueName"+experIndex).val(uniqueNameValue);

$("#"+deleteLiId).remove();//删除页面相对应的文件

//获取删除的文件在文件名字字符串中的位置，并删除

var delFilename=fileNames.splice(jQuery.inArray(fileNames[arrayIndex],fileNames),1);//定义删除的文件所在位置

for(var i=0;i<fileNames.length;i++){

 if(fileNames[i]==delFilename){continue;}else{

 inputValut+=fileNames[i]+",";

}

}

 

if(inputValut!=""){

 inputValut=inputValut.substring(1,inputValut.length-1);

}

$("#fileName"+experIndex).val(inputValut);

//处理删除文件后的数量限制

    var stats=swfu[experIndex].getStats();

   stats.successful_uploads--;

   swfu[experIndex].setStats(stats);

 if(stats.successful_upload<1){

swfu[experIndex].setButtonImageURL("/img/continue_upload.png");//换背景

swfu[experIndex].setButtonCursor(SWFUpload.CURSOR.HAND);//鼠标属性

swfu[experIndex].setButtonDisabled(false);

}else if(stats.successful_upload>=1 && stats.successful_upload<=2){

swfu[experIndex].setButtonImageURL("/img/continue_upload.png");//换背景

swfu[experIndex].setButtonCursor(SWFUpload.CURSOR.HAND);//鼠标属性

swfu[experIndex].setButtonDisabled(false);

}  

alert("删除成功");

}else{

alert("删除失败");

}

});

})

}