在進行圖片上傳時，通常需要進行預覽。而這種預覽的行為通常是預覽客戶端的本地資源。下面就講一下在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的值，以實現圖片預覽。