使用SWFUpload进行多文件上传

简介:

SWFUpload可以说是目前最好的多文件上传工具之一,虽然它是基于flash插件开发的,但是相比目前很多js多文件上传还是具有很多优点:

可以同时选择多个文件上传(注意是以此选择文件)

无刷新上传

可以显示进度条

良好的浏览器兼容性

兼容其他js类库

SWFUpload另个优点就是它优秀的设计,它提供了一组简明的Javascript事件,借助它们开发者可以方便的在文件上传过程中更新页面的内容。

下面是SWFUpload在具体使用过程中js代码

MultiFileHandler.js

function  fileQueueError(file, errorCode, message) {
     try  {
         var  imageName = "error.gif" ;
         var  errorName = "" ;
         if  (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {
             errorName = "文件超过最大上传个数!" ;
         }
 
         if  (errorName !== "" ) {
             alert(errorName);
             return ;
         }
 
         switch  (errorCode) {
         case  SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
             imageName = "zerobyte.gif" ;
             break ;
         case  SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
             imageName = "toobig.gif" ;
             break ;
         case  SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
         case  SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
         default :
             alert(message);
             break ;
         }
 
         addImage( "/modules/commons/view/multifileupload/images/"  + imageName);
 
     } catch  (ex) {
         this .debug(ex);
     }
 
}
 
function  fileDialogComplete(numFilesSelected, numFilesQueued) {
     try  {
         if  (numFilesQueued > 0) {
             this .startUpload();
         }
     } catch  (ex) {
         this .debug(ex);
     }
}
 
function  uploadProgress(file, bytesLoaded) {
 
     try  {
         var  percent = Math.ceil((bytesLoaded / file.size) * 100);
 
         var  progress = new  FileProgress(file,  this .customSettings.upload_target);
         progress.setProgress(percent);
         if  (percent == 100) {
             if (showThumbnail){
                 progress.setStatus( "正在创建缩略图..." );
             }
             progress.toggleCancel( false , this );
             uploadNum++;
             setUploadNumber(uploadNum);
         } else  {
             progress.setStatus( "正在上传中,已完成" +percent+ "%" );
             progress.toggleCancel( true , this );
         }
     } catch  (ex) {
         this .debug(ex);
     }
}
 
//文件数据发送成功,不管是否成功保存;其serverData是否服务器端处理完以后的返回值
//这里规定返回值必须为success才代表成功
var  serverErrorInfo= "" ;
function  uploadSuccess(file, serverData) {
     try  {
         var  sd=serverData.replace(/ /gi, '' ).replace(/ /gi, '' ).replace(/\r/gi, '' ).replace(/\n/gi, '' ).replace(/\t/gi, '' );
         if (showThumbnail){
             var  filePath= ".." ;
             if (savePath!= '' ){
                 filePath=filePath+ "/" +savePath;
             }
             filePath=filePath+ '/' +file.name;
             addImage(filePath);
         }
         var  progress = new  FileProgress(file,  this .customSettings.upload_target);
         if (showThumbnail){
             progress.setStatus( "缩略图创建完成!" );
         }
         if (sd!= '' ){
             if (sd!= 'success' ){
                 if (serverErrorInfo!= '' ){
                     serverErrorInfo+= '<br />' ;
                 }
                 serverErrorInfo+=sd;
                 document.getElementById( 'divError' ).innerHTML=serverErrorInfo;
             }
         }
         progress.toggleCancel( false );
 
 
     } catch  (ex) {
         this .debug(ex);
     }
}
 
//服务器端返回非空值才认为上传成功,触发下面事件
function  uploadComplete(file) {
     try  {
         /*  I want the next upload to continue automatically so I'll call startUpload here */
         if  ( this .getStats().files_queued > 0) {
             this .startUpload();
         } else  {
             var  progress = new  FileProgress(file,  this .customSettings.upload_target);
             progress.setComplete();
             if (!isCancel){
                 progress.setStatus( "文件上传成功!" );
             } else {
                 progress.setStatus( "上传已取消!" );
                 isCancel= false ;
             }
             progress.toggleCancel( false );
         }
     } catch  (ex) {
         this .debug(ex);
     }
}
 
function  uploadError(file, errorCode, message) {
     var  imageName =  "error.gif" ;
     var  progress;
     try  {
         switch  (errorCode) {
         case  SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
             try  {
                 progress = new  FileProgress(file,  this .customSettings.upload_target);
                 progress.setCancelled();
                 progress.setStatus( "取消完成!" );
                 progress.toggleCancel( false );
             }
             catch  (ex1) {
                 this .debug(ex1);
             }
             break ;
         case  SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
             try  {
                 progress = new  FileProgress(file,  this .customSettings.upload_target);
                 progress.setCancelled();
                 progress.setStatus( "已停止!" );
                 progress.toggleCancel( true );
             }
             catch  (ex2) {
                 this .debug(ex2);
             }
         case  SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
             imageName = "uploadlimit.gif" ;
             break ;
         default :
             alert(message);
             break ;
         }
 
         addImage( "/modules/commons/view/multifileupload/images/"  + imageName);
 
     } catch  (ex3) {
         this .debug(ex3);
     }
 
}
 
 
function  addImage(src) {
     var  imageName=getFileName(src);
     var  divImage=document.createElement( "span" );
     divImage.style.margin = "5px" ;
     divImage.style.padding = "1px" ;
     divImage.style.width = "59px" ;
     divImage.style.height = "85px" ;
     divImage.style.display= "block" ;
     divImage.style.border= "10px" ;
     divImage.style.float= "left" ;
     divImage.attachEvent( "onmouseover" , setBackground(divImage, "#FFFACD" ));
     divImage.attachEvent( "onmouseout" , setBackground(divImage, "#FFFFFF" ));
     
     var  newImg = document.createElement( "img" );
     //newImg.style.margin = "5px";
     newImg.style.width = "59px" ;
     newImg.style.height = "59px" ;
     newImg.alt=imageName;
     
     var  divImageName=document.createElement( "div" );
     divImageName.style.marginTop= "5px" ;
     divImageName.style.width= "59px" ;
     divImageName.style.height= "20px" ;
     divImageName.style.textAlign= "center" ;
     divImageName.innerHTML=imageName;
     
     divImage.appendChild(newImg);
     divImage.appendChild(divImageName);
     document.getElementById( "thumbnails" ).appendChild(divImage);
     if  (newImg.filters) {
         try  {
             newImg.filters.item( "DXImageTransform.Microsoft.Alpha" ).opacity = 0;
         } catch  (e) {
             // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
             newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity= ' + 0 + ' ) ';
         }
     } else {
         newImg.style.opacity = 0;
     }
 
     newImg.onload = function () {
         fadeIn(newImg, 0);
     };
     newImg.src = src;
}
 
function fadeIn(element, opacity) {
     var reduceOpacityBy = 5;
     var rate = 30;  // 15 fps
 
 
     if (opacity < 100) {
         opacity += reduceOpacityBy;
         if (opacity > 100) {
             opacity = 100;
         }
 
         if (element.filters) {
             try {
                 element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
             } catch (e) {
                 // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
                 element.style.filter = ' progid:DXImageTransform.Microsoft.Alpha(opacity= ' + opacity + ' ) ';
             }
         } else {
             element.style.opacity = opacity / 100;
         }
     }
 
     if (opacity < 100) {
         setTimeout(function () {
             fadeIn(element, opacity);
         }, rate);
     }
}
 
var isCancel=false;//是否取消上传
var uploadNum=0;//已成功上传文件
cancelUpload=function(){
     document.getElementById(' imgCancelButton ').style.visible=' hidden ';
     swfu.cancelUpload();
     /*var fileProgressID = "divFileProgress";
     var fileProgressWrapper = document.getElementById(fileProgressID);
     var fileProgressElement = fileProgressWrapper.firstChild;
     fileProgressElement.childNodes[2].innerHTML = ' 上传已停止! ';*/
     isCancel=true;
}
setUploadNumber=function(num){
     document.getElementById("lgdUploadNumber").innerHTML="文件上传(已上传<span id=' spNumber '>"+num+"</span>个文件)";
}
getFileName=function(filePath){
     var i=0;
     if(filePath.indexOf(' / ')==-1){
         i=filePath.lastIndexOf(' \\ ');
     }else{
         i=filePath.lastIndexOf(' / ');
     }
     var j=filePath.lastIndexOf(' .');
     var  fileName=filePath.substring(i+1,j);
     return  fileName;
}
setBackground= function (obj,color){
     return  function (){
         setBackgroundWithParams(obj,color);
     }
}
setBackgroundWithParams= function (obj,color){
     obj.style.backgroundColor=color;
     obj.style.border= "1px" ;
     obj.style.borderColor= "red" ;
     
}
/* ******************************************
  *  FileProgress Object
  *  Control object for displaying file info
  * ****************************************** */
function  FileProgress(file, targetID) {
     this .fileProgressID = "divFileProgress" ;
 
     this .fileProgressWrapper = document.getElementById( this .fileProgressID);
     if  (! this .fileProgressWrapper) {
         this .fileProgressWrapper = document.createElement( "div" );
         this .fileProgressWrapper.className = "progressWrapper" ;
         this .fileProgressWrapper.id = this .fileProgressID;
 
         this .fileProgressElement = document.createElement( "div" );
         this .fileProgressElement.className = "progressContainer" ;
 
         var  progressCancel = document.createElement( "a" );
         progressCancel.className = "progressCancel" ;
         progressCancel.href = "#" ;
         progressCancel.id = "imgCancelButton" ;
         progressCancel.attachEvent( "onclick" , cancelUpload);
         progressCancel.style.visibility = "hidden" ;
         progressCancel.appendChild(document.createTextNode( " " ));
 
         var  progressText = document.createElement( "div" );
         progressText.className = "progressName" ;
         progressText.appendChild(document.createTextNode(file.name));
 
         var  progressBar = document.createElement( "div" );
         progressBar.className = "progressBarInProgress" ;
 
         var  progressStatus = document.createElement( "div" );
         progressStatus.className = "progressBarStatus" ;
         progressStatus.innerHTML = " " ;
 
         this .fileProgressElement.appendChild(progressCancel);
         this .fileProgressElement.appendChild(progressText);
         this .fileProgressElement.appendChild(progressStatus);
         this .fileProgressElement.appendChild(progressBar);
 
         this .fileProgressWrapper.appendChild( this .fileProgressElement);
 
         document.getElementById(targetID).appendChild( this .fileProgressWrapper);
         fadeIn( this .fileProgressWrapper, 0);
 
     } else  {
         this .fileProgressElement = this .fileProgressWrapper.firstChild;
         this .fileProgressElement.childNodes[1].firstChild.nodeValue = file.name;
     }
 
     this .height = this .fileProgressWrapper.offsetHeight;
 
}
FileProgress.prototype.setProgress = function  (percentage) {
     this .fileProgressElement.className = "progressContainer green" ;
     this .fileProgressElement.childNodes[3].className = "progressBarInProgress" ;
     this .fileProgressElement.childNodes[3].style.width = percentage + "%" ;
};
FileProgress.prototype.setComplete = function  () {
     this .fileProgressElement.className = "progressContainer blue" ;
     this .fileProgressElement.childNodes[3].className = "progressBarComplete" ;
     this .fileProgressElement.childNodes[3].style.width = "" ;
 
};
FileProgress.prototype.setError = function  () {
     this .fileProgressElement.className = "progressContainer red" ;
     this