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

为文件上传控件添加一个change事件。注意，在这里一定要用Ext.get方法取得控件，否则change事件会无效的。当有图片上传时，控件的值会发生改变，然后修改预览控件的src的值，以实现图片预览。