Ext.ux.UploadDialog的使用经验

由于近段时间产品中需要加上上传组件,之前考虑过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();
	}