ExtJS上传图片预览功能

{
                    columnWidth: .9,
                    layout: 'form',
                    border: false,
                    items : [{
                            inputType : "file",
                            fieldLabel: '上传图片',
                            name: 'imageupload',
                            id:'imageupload',                           
                            xtype: 'textfield',
                            anchor: '40%'
                         
                            }]
            
                   },
                   {
                    columnWidth: .5,
                    layout: 'form',
                    border: false,
                    items : [
                            {
                                 xtype: 'box',
                                id : 'browseImage',
                                fieldLabel : "预览图片",
                                autoEl : {
                                    width : 100,
                                    height : 150,
                                    tag : 'img',
                                    //type : 'image',
                                    src : Ext.BLANK_IMAGE_URL,
                                    style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
                                    complete:'off',
                                    id : 'imageBrowse'
                                    }
                            }
                            
                             ]           
            
                   }

这是构造上传的FILE的代码，网上看到很多autoCreate代替autoEl，不过查了下最新的3.2版本的API没发现这个，component只有autoEl配置项。

下面是处理预览的代码

 

//上传图片类型
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/


Ext.extend(simpleForm,Ext.form.FormPanel,{
listeners:
{
    'render':function(f)
    {
        this.form.findField('imageupload').on('render',function()
         {  
             Ext.get('imageupload').on('change',function(field,newValue,oldValue )
             {
               
                 
                 var url = 'file:///'+Ext.get('imageupload').dom.value;
                   
                  
                if(img_reg.test(url))
                {  
                                   
                                 if(Ext.isIE)
                                 {  
                                    var image = Ext.get('imageBrowse').dom;  
                                     image.src = Ext.BLANK_IMAGE_URL;//覆盖原来的图片  
                                     image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=url; 
                                           
                                 }//支持FF
                                 else
                                 {  
                                    Ext.get('imageBrowse').dom.src =Ext.get('imageupload').dom.files.item(0).getAsDataURL()
                                 }  
                 }  
           },this);  
         },this); 
    }
}


});