首先,创建为预览图片创建一个控件:
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的值,以实现图片预览。