使用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,
   ....
}

编写事件回调接口（片段）：

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);
} ,