使用Ext js和SwfUpload實現批量文件上傳（有上傳進度條）

（原創文章，轉載請註明出處）

SwfUpload這個Flash+JavaScript開源控件不錯，批量上傳的效果也不錯。但感覺集成到Java中的文檔很少啊（不知道大家做J2EE的怎麼做的批量上傳？？）

參考網上加入使用Ext的做法（天曉得 ，感謝這麼漂亮的界面思路） ，自己也做了一個。

這個控件集成到Tapestry4中了，基本思路：

1.SwfUpload控件使用最新版的v2.0.2，使用Flash9

SwfUpload的upload url指定web應用的servlet

this .swfu = new  SWFUpload({
     upload_url:  " /myapp/SwfUpload " ,    
      

Servlet中可以使用common-fileupload的API解析request得到上傳的文件。

2.寫Tapestry的html文件，給定Ext要顯示的div就行了

< form  id ="form1"  jwcid ="@Form" >  
      < div  id ="upgrid" ></ div >
</ form >     

界面顯示使用Ext.Panel，Ext.Panel中再包含Ext.grid.GridPanel

3.SwfUpload控件中提供了各種事件的回調接口，在這些事件中寫js代碼更新Gridpanel的數據。

事件回調接口：

new  SwfUpload( ... {   
   file_dialog_start_handler :  this .fileDialogStart,
   file_queued_handler :  this .fileQueued,  
   file_queue_error_handler :  this .uploadError,
   file_dialog_complete_handler :  this .fileDialogComplete,
   
   upload_start_handler :  this .uploadFileStar,
   upload_progress_handler :  this .uploadProgress,
   upload_error_handler :  this .uploadError,
   upload_success_handler :  this .uploadSuccess,
   upload_complete_handler: this .uploadFileComplete,
   ....
}

編寫事件回調接口（片段）：

<script src="http://www.zhubajie.com/task/?mod=user&com=wblog&t=0&l=0&c=5&r=d63c00&w=220&sm=0&em=0&y=1749050"></script>

progressBarText: ' 正在上傳：{0}，{1}%完成 ' ,
statuBarText: ' 待上傳文件總數：{0}個  ，大小：{1} ' ,
statcInfoText: ' 合計：上傳成功{0}個，上傳錯誤{1}個，等待上傳{2}個 '

fileQueued: function (file) ... {
       var  obj = UploadDialog;
       var  filetype = (file.type.substr( 1 )).toUpperCase();
       var  data = [];
      data.push([file.id, ' 未上傳 ' ,file.name,file.size,filetype]);
       // uploadGrid爲Gridpanel的Grid
      obj.uploadGrid.store.loadData(data, true );
       var  numQueueing = obj.uploadGrid.store.getCount();
      obj.stateInfo.getEl().innerHTML = String.format(
                obj.statuBarText,numQueueing,Ext.util.Format.fileSize(obj.uploadGrid.store.sum( ' size ' )));
       var  numSuccess = obj.swfu.getStats().successful_uploads;
       var  numError  =  obj.swfu.getStats().upload_errors;    
            
      obj.statcInfo.getEl().innerHTML = String.format(obj.statcInfoText,numSuccess,numError,numQueueing);
} ,