ExtJs图片上传+回显

var addStore = Ext.create('Ext.data.Store', {
    fields: ['id', 'model'],
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: path + '/ad/phoneList.do',
        reader: {
        	type: 'json',
            root: 'rows'
        }
    }
});

var addPop = Ext.create('Ext.window.Window', {
	id: 'adWin',
    title: '增加',
    height: 370,
    width: 480,
    bodyPadding: 5,
    maximizable: true,
    modal: true,
    closeAction: 'hide',
    overflowX: 'hidden',
    overflowY: 'auto',
    items: [
	    Ext.create('Ext.form.Panel', {
	    	id: 'adForm',
	    	width: 460,
	    	height: 50,
	        url: path + '/ad/saveAd.do',
	        layout: 'anchor',
	        defaults: {
	            anchor: '80%',
	            labelWidth: 100,
	            blankText: '必填项'
	        },
	        defaultType: 'textfield',
	        items: [{ 
				xtype: "combobox",             //使用xtype定义
				name: "modeId",                //form提交时的名称
				id: "modId",
				fieldLabel: "所属机型",        //显示的Label
				store: addStore,               //绑定的Store
				editable: false,               //是否可编辑
				displayField: "model",         //显示的字段
				valueField: "id",              //值的字段
				emptyText: "----请选择机型----",//当没有值时的水印文字
				queryMode: "local"             //查询模式
    				
			},{//隐藏域
    			name: 'adURL',
    			id : 'adURL',
    			hidden: true
    		}]
	    }),
	  //覆盖升级包的选择上传功能
        Ext.create('Ext.form.Panel', {
        	url: path + '/upload/uploadIcon.do',
            id: 'adUploadForm',
            layout: 'form',
            items:[{
            layout: 'hbox',
            items: [{
                    xtype: 'box',//或者xtype: 'component',  
                    id: 'ad_picture',
                    width: 150,//图片宽度  
                    height: 150,//图片高度  
                    margin:'0 0 0 118',
                    autoEl: {
                        tag: 'img',//指定为img标签
                        src: '../../../static/ext/examples/restful/images/nofoundimage.png',
                        style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:150px;height:150px;text-align:center;'
                    }
                }
            ]},{
                layout : "hbox",
                items : [{
                   xtype: 'filefield',
                   fieldLabel: '广告图',
                   buttonText: '浏览',
                   emptyText: '请选择一个图片文件',
                   id:'select_ad',
                   name: 'pkg',
                   width: 300,
                   margin:'0 0 0 10',
                   listeners: {
                       change: function(btn, value){
                       	var formPanel = Ext.getCmp('adUploadForm');
                           var uploadImage = formPanel.down('filefield[id=select_ad]');
        		            if(value!=null && !Ext.isEmpty(value)){
                           	//验证图片文件的正则  
                               var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
                               if (!img_reg.test(value)) {
                                   Ext.Msg.alert('提示', '文件类型错误,请选择图片文件(jpe/jpeg/gif/png/bmp)');
                                   return;
                               }
        		                var imageShow_box = formPanel.down('box[id=ad_picture]');//预览的图片框对象
                                var imageShow_box_dom = imageShow_box.getEl().dom;
        	                    if(Ext.isIE){//IE浏览器
        			                var url = "file://" + value;
        	                        imageShow_box_dom.src = Ext.BLANK_IMAGE_URL;//覆盖原来的图片   
        	                        imageShow_box_dom.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url; 
        	                    }else{
        			                //得到选择的图片路径 
                               	var file = btn.fileInputEl.dom.files[0];
        	                        imageShow_box_dom.src = window.URL.createObjectURL(file);
        	                    }
        		            }else{
        		            	Ext.Msg.alert('提示','请选择图片文件');
                               return;
        		            }
                           Ext.getCmp('adUploadBtn').setDisabled(false);
                       }
                   }
               },{
                   xtype: 'button',
                   id: 'adUploadBtn',
                   text: '上传',
                   disabled: true,
                   margin:'0 0 0 10',
                   handler: function(){
                       Ext.getCmp('adUploadForm').getForm().submit({
                           waitTitle: '系统提示',
                           setZIndex: Ext.emptyFn,
                           modal: true,
                           waitMsg: '图标上传中，请稍候......',
                           success: function(form, action){
        	                   	var result = eval('('+action.response.responseText+')')
        	                   	if(result.success!=true){
        	                   		Ext.Msg.alert('系统错误提示', '上传失败！');
    							}else{
    								Ext.Msg.alert('系统提示', '上传成功！');
    								//为adUrl赋值
    								Ext.getCmp('adURL').setValue(result.savePath);
    								Ext.getCmp('adUploadBtn').setDisabled(true);
    							}
        					},
        					failure: function(form, action){
        						Ext.Msg.alert('系统错误提示', "上传失败,请重新上传");
        					}
                       });
                   }
               }]
            }]
        })
    ],
    buttons: [
        {
        	text: '保存',
        	handler: function(){
        		var iconPath=Ext.getCmp('adURL').getValue();
        		if(iconPath == "" || iconPath == null){
        			Ext.Msg.alert('系统提示', '请上传图标');
        			return;
        		}
        		var mod = Ext.getCmp('modId').getValue();
        		if(mod == "" || mod == null){
        			Ext.Msg.alert('系统提示', '请选择机型');
        			return;
        		}
        		for (var i = 0; i < adStore.getCount(); i++) {   
        		    var record = adStore.getAt(i);  
        		    if(record.get('modeId')== mod){
        		    	Ext.Msg.alert('系统提示', '保存失败,当前机型已存在');
        		    	return;
        		    }
        		}  
        		Ext.getCmp('adForm').submit({
        			waitTitle: '系统提示',
        			waitMsg: '保存中......',
        			success: function(form, action){
        				addPop.hide();
        	       		Ext.getCmp('ad_picture').getEl().dom.src='../../../static/ext/examples/restful/images/nofoundimage.png';
        	       		Ext.getCmp('adForm').getForm().reset();
        	       		Ext.getCmp('adUploadForm').getForm().reset();
        				adPanel.getStore().reload();
        				Ext.Msg.alert('系统提示', '保存成功!');
        			},
        			failure: function(form, action){
        				Ext.Msg.alert('系统提示', '保存失败!');
        			}
        		});
        	}
        },{
        	text: '取消',
        	handler: function(){
        		addPop.hide();
	       		Ext.getCmp('ad_picture').getEl().dom.src='../../../static/ext/examples/restful/images/nofoundimage.png';
	       		Ext.getCmp('adForm').getForm().reset();
	       		Ext.getCmp('adUploadForm').getForm().reset();
        	}
        }
    ]
});