Ext图片上传之预览

 在进行图片上传时，通常需要进行预览。而这种预览的行为通常是预览客户端的本地资源。下面就讲一下在Ext中是如何实现图片上传预览的。

首先，创建为预览图片创建一个控件：

                        xtype : 'box',  
                        id : 'logoPic',  
                        width : 150,  
                        height : 200,  
                        autoEl : {  
                            tag : 'img',  
                            src : currentLogoPath,    
                            style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'  
                        } 

然后再创建一个图片上传的控件：

				                  xtype : 'textfield',  
						id : 'logoFile',  
						name : 'logoFile',  
						inputType : 'file',  
						fieldLabel : '  商社标志文件',  
						width : 280,  
						listeners : {  
						    'render':function(){  
						        var logoFileCmp = Ext.get('logoFile');  
						        logoFileCmp.on('change',function(field,newValue,oldValue){  
						                 var picPath = logoFileCmp.getValue();  
						                 var url = 'file:///' + picPath;  
						                 if(Ext.isIE){  
						                                  var image = Ext.get('logoPic').dom;    
						                      image.src = Ext.BLANK_IMAGE_URL;  
						                      image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;   
						                 }else{  
						                      //支持FF   
						                      Ext.get('logoPic').dom.src =Ext.get('logoFile').dom.files.item(0).getAsDataURL();  
						                 }  
						            },this);  
						         }  
						}