ext3自带的fileuploadfield打开的文件选择窗口只能选择一个文件,实现简单的上传。在项目开发中,更多的还是会要求能同时选择多个文件。在接下来的内容将附上本人项目中用到的通过swfupload上传组件实现多选上传。
前台使用自定义控件uploadpanel,里边的内容可以根据用户需要自行修改。
new Ext.Window({
title: '导入模板',
width : 700,
height : 350,
layout: 'fit',
closeAction: 'hide',
constrain: true,
bodyStyle: 'padding: 5px',
modal: true,
resizable: true,
buttonAlign: 'center',
items: [{
xtype: 'uploadpanel',
uploadUrl: importTemplateUrl, // 后台处理url
filePostName: 'swfUploadFile',
flashUrl: 'swf/swfupload.swf', // 本地最好下载swfupload.swf文件,上传组件swfupload.swf存放目录
fileSize : '200MB',
border : false,
fileTypes : '*.exp', // 在这里限制文件类型:'*.exp
fileTypesDescription : 'exp文件',
postParams: {
postType: 1
}
}],
listeners: {
'hide': function() {
// 将导入模板画面的数据也清空getProgressTemplate,导入文件的表格数据
var uploadPanel = this.findByType('uploadpanel')[0];
uploadPanel.resetProgressTemplate();
uploadPanel.fileList.getStore().removeAll();
uploadPanel.fileList.getStore().removeAll();
uploadPanel.progressInfo.filesTotal = 0;
uploadPanel.progressInfo.bytesTotal = 0;
}
}
});
后台根据当前使用的项目各自的封装进行接收,本人的项目是使用strut接收的,根据前台定义的filePostName: 'swfUploadFile',后台对应setter getter获取,得到FormFile对象,实现上传。
接着附上自定义控件uploadpanel的定义:
Date.prototype.getElapsed = function(A) {
return Math.abs((A || new Date()).getTime() - this.getTime())
};
UploadPanel = Ext.extend(Ext.Panel, {
fileList : null,
swfupload : null,
progressBar : null,
progressInfo : null,
uploadInfoPanel : null,
constructor : function(config) {
this.progressInfo = {
filesTotal : 0,
filesUploaded : 0,
bytesTotal : 0,
bytesUploaded : 0,
currentCompleteBytes : 0,
lastBytes : 0,
lastElapsed : 1,
lastUpdate : null,
timeElapsed : 1
};
this.uploadInfoPanel = new Ext.Panel({
hidden: 'true',
region : 'north',
height : 60,
baseCls : '',
collapseMode : 'mini',
split : true,
border : false
});
this.progressBar = new Ext.ProgressBar({
text : '等待中 0 %',
animate : true
});
var autoExpandColumnId = Ext.id('msg');
this.uploadInfoPanel.on('render', function() {
this.getProgressTemplate().overwrite(this.uploadInfoPanel.body, {
filesUploaded : 0,
filesTotal : 0,
bytesUploaded : '0 bytes',
bytesTotal : '0 bytes',
timeElapsed : '00:00:00',
timeLeft : '00:00:00',
speedLast : '0 bytes/s',
speedAverage : '0 bytes/s'
});
}, this);
this.fileList = new Ext.grid.GridPanel({
border : false,
enableColumnMove : false,
enableHdMenu : false,
columns : [new Ext.grid.RowNumberer(), {
header : '文件名',
width : 100,
dataIndex : 'fileName',
sortable : false,
fixed : true,
renderer : this.formatFileName
}, {
header : '大小',
width : 80,
dataIndex : 'fileSize',
sortable : false,
fixed : true,
renderer : this.formatFileSize,
align : 'right'
}, {
header : '类型',
width : 60,
dataIndex : 'fileType',
sortable : false,
fixed : true,
renderer : this.formatIcon,
align : 'center'
}, {
header : '进度',
width : 100,
dataIndex : '',
sortable : false,
fixed : true,
renderer : this.formatProgressBar,
align : 'center'
}, {
header : '状态',
width : 35,
dataIndex : 'fileState',
renderer : this.formatState,
sortable : false,
fixed : true,
align : 'center'
}, {
header : ' ',
width : 28,
dataIndex : 'msg',
renderer : this.columnTooltip,
sortable : false,
fixed : true,
align : 'left',
id : autoExpandColumnId
}],
autoExpandColumn : autoExpandColumnId,
ds : new Ext.data.SimpleStore({
fields : ['fileId', 'fileName', 'fileSize', 'fileType', 'fileState', 'msg']
}),
//bbar : [this.progressBar],
tbar : [{
text : '添加文件',
iconCls : 'db-icn-add'
}, {
text : '开始导入',
iconCls : 'db-icn-upload_',
handler : function(){
this.startUpload();
},
scope : this
},'-', {
text : '停止导入',
iconCls : 'db-icn-stop',
ha