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 ); 
    }
}


});