(原创文章,转载请注明出处)
SwfUpload这个Flash+JavaScript开源控件不错,批量上传的效果也不错。但感觉集成到Java中的文档很少啊(不知道大家做J2EE的怎么做的批量上传??)
参考网上加入使用Ext的做法(天晓得 ,感谢这么漂亮的界面思路) ,自己也做了一个。
这个控件集成到Tapestry4中了,基本思路:
1.SwfUpload控件使用最新版的v2.0.2,使用Flash9
SwfUpload的upload url指定web应用的servlet
upload_url: " /myapp/SwfUpload " ,
Servlet中可以使用common-fileupload的API解析request得到上传的文件。
2.写Tapestry的html文件,给定Ext要显示的div就行了
< div id ="upgrid" ></ div >
</ form >
界面显示使用Ext.Panel,Ext.Panel中再包含Ext.grid.GridPanel
3.SwfUpload控件中提供了各种事件的回调接口,在这些事件中写js代码更新Gridpanel的数据。
事件回调接口:
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,
....
}
编写事件回调接口(片段):
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);
} ,