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的值，以实现图片预览。