Extjs4 多文件上传(swfupload)

平台是extjs4+struts2

定义一个带回调函数的window

 1 var _showMultiUploadWindow = function (callbackFunction,uploadUrl,post_params,file_types) {
 2     var win =  Ext.create('Ext.ext.uploadWindow.MultiUploadWindow', {
 3         callbackFunction: callbackFunction,
 4         uploadUrl: uploadUrl,
 5         post_params:post_params,
 6         file_types:file_types
 7     });    
 8     win.show();
 9 };
10 
11 
12 
13 Ext.define('Ext.ext.uploadWindow.MultiUploadWindow' ,{    
14     extend: 'Ext.window.Window',
15     alias: 'widget.multiUploadWindow',
16     iconCls: 'x-button-grid',
17     title: '文件上传(单个文件限10M)',
18     closeAction: 'hide',
19     layout: 'fit',
20     resizable: false,
21     modal: true,
22     initComponent: function() {
23         var me = this;
24         
25         this.panel=Ext.create('Ext.ux.uploadPanel.UploadPanel',{
26             header: false,
27             addFileBtnText : '选择文件...',
28             uploadBtnText : '上传',
29             removeBtnText : '移除所有',
30             cancelBtnText : '取消上传',
31             file_size_limit : 10,//MB
32             width : 600, 
33             height : 300, 
34             flash_url : "js/swfupload/swfupload.swf", 
35             flash9_url : "js/swfupload/swfupload_fp9.swf",
36             upload_url : this.uploadUrl,
37             callbackFunction:this.callbackFunction,
38             post_params:this.post_params,
39             file_types:this.file_types,
40             upload_complete_handler: Ext.bind(function() {
41                 if (this.isVisible()) {
42                     this.close();
43                 }
44             }, this)
45         });
46         
47         this.items = [this.panel];
48         this.callParent(arguments);
49     }
50 });

调用

 1 //允许上传的文件类型
 2         var fileType = "*.jpg;*.png;*.jpeg;*.gif;*.bmp";
 3         
 4         _showMultiUploadWindow(multiUpladCallback,"customerManage!uploadMultiFile.action;jsessionid="+sessionId,params,fileType);
 5         function multiUpladCallback(serverData){
 6             if( (null!=serverData && "undefined"!=serverData) && true==serverData.success &&  (null!=serverData.data[0] && "undefined"!=serverData.data[0])){
 7                 var data = serverData.data[0];
 8                 var ins = Ext.create('Keer.ext.model.ExPhotoContentDataViewModel',{
 9                     'id':data.id,
10                     'name':data.name,
11                     'width':data.width,
12                     'height':data.height,
13                     'url':data.url
14                 });
15                 dataview.getStore().add(ins);
16             }
17         }

后台action，定义若干参数用于接收文件

1 /**多文件上传**/
2     private File   Filedata;
3     private String FiledataFileName;
4     private String FiledataContentType;
5     //前台用户修改后的文件名
6     private String newFileName;

其他js包参见于百度网盘开发-随笔附件中内容

秒客网

Extjs4 多文件上传(swfupload)

相关文章