由于近段时间产品中需要加上上传组件,之前考虑过jQuery,但是现有项目是用ext完成的。所以使用了
Ext.ux.UploadDialog进行实现,遇到的第一个问题就是该Ext组件是批量上传组件,但是产品中只允许单个上传,通过对
源码的查看,发觉只要在添加文件时进行过滤就可以了。过滤代码如下:
//定义文件添加事件
dialog.on('fileadd', function(){
var tb = this.grid_panel.getBottomToolbar();
if(this.grid_panel.getStore().getCount() > 1){
extWarn('每次只能上传一张背景图片!');
this.grid_panel.getSelectionModel().selectLastRow();
var selections = this.grid_panel.getSelectionModel().getSelections();
this.fsa.postEvent('remove-files', selections);
}
});
具体API就不多说了。
官方网站:http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php
效果如下:
完整的代码如下:
1.前台代码:
/* 异步上传背景图片 */ function upload(code){ var dialog = new Ext.ux.UploadDialog.Dialog({ title: '上传背景图片(<a style="color:red">请注意:每次只能上传一张图片</a>)', url: 'mapConfigAction_uploadImage.action', base_params: { proCode: 'china' }, post_var_name: 'uploadifyFiles', width: 450, height: 200, minWidth: 450, minHeight: 200, draggable: true, resizable: true, constraintoviewport: true, permitted_extensions: ['JPG', 'jpg', 'jpeg', 'JPEG', 'GIF', 'gif', 'png', 'PNG'], modal: true, reset_on_hide: false, allow_close_on_upload: false, //关闭上传窗口是否仍然上传文件 upload_autostart: false }); dialog.on('uploadsuccess',function(dialog, filename){ Ext.MessageBox.alert('成功提示','文件上传完成!'); dialog.hide(); }); //定义上传完成 dialog.on('uploadcomplete', function(){ Ext.MessageBox.alert('成功提示','文件上传完成!'); dialog.hide(); }); //定义文件添加事件 dialog.on('fileadd', function(){ var tb = this.grid_panel.getBottomToolbar(); if(this.grid_panel.getStore().getCount() > 1){ extWarn('每次只能上传一张背景图片!'); this.grid_panel.getSelectionModel().selectLastRow(); var selections = this.grid_panel.getSelectionModel().getSelections(); this.fsa.postEvent('remove-files', selections); } }); //显示上传框 dialog.show(); }
2.struts2后台代码:
/**
* 上传图片保存到报表端.
*
* @throws IOException
* @throws SQLException
*
*/
private void save2Report(String proCode) throws IOException, SQLException {
String path = "";
if (StringUtils.equals(CHINA, proCode)) {
path = AQSConstant.REPORT_CHINA_MAP_IMAGE_PATH;
} else {
path = AQSConstant.REPORT_PROVINCE_IMAGE_PATH + this.proCode + ".jpg";
}
// 根据路径写入图片
writeImage(path);
}
/**
* 根据传入图片路径写入图片.
*
* @param path
* 图片路径
* @throws IOException
* @throws SQLException
*/
private void writeImage(String path) throws IOException, SQLException {
int len = 0;
FileInputStream fis = new FileInputStream(getUploadifyFiles()[0]);
FileOutputStream fos = FileUtils.openFileOutputStream(new File(path));
byte[] buffer = new byte[fis.available()];
while ((len = fis.read(buffer)) > 0) {
fos.write(buffer, 0, len);
}
fos.flush();
fos.close();
}