最近写一个系统,使用了Ext,涉及到图片预览功能,本来在html中是非常简单的问题,到Ext中变得也很麻烦,自己也没有写过,找了一些资料,么有发现能用的,结合网上的一些资料,自己整理了一下,给代码贴一下!
最终效果图:
var electron_form=new Ext.form.FormPanel({
url:"employeeManage.jhtml?method=saveElec",
height:600,
width:800,
labelWidth:80,
labelAlign:"left",
frame:true,
fileUpload:true,
defaults:{xtype:"field",width:350},
items:[{
xtype:"textfield",
name:"userName",
value:name,
fieldLabel:"职工姓名"
},{
xtype:"hidden",
name:"uid",
value:id
},{
xtype:"numberfield",
name:"sequence",
fieldLabel:"档案序号",
allowDecimals:false,
allowBlank:false,
blankText:"档案序号不能为空"
},{
id: 'imageUpload',
name:'imageUpload',
fieldLabel:"电子档案",
inputType:"file"
},{
id:'browseImage',
fieldLabel:"预览档案",
autoCreate:{
width:400,
height:500,
tag: 'input',
type: 'image',
src: Ext.BLANK_IMAGE_URL,
style:'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' ,
name: 'imageBrowse'
}
}
],
buttons:[{text:"添加电子档案",handler:addElectron},{text:"取消添加",handler:function(){electron_win.close();}}]
})
var img_reg=/\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/
electron_form.on('render',function(f){
electron_form.form.findField('imageUpload').on('render',function(){
Ext.get('imageUpload').on('change',function(field,newValue,oldValue ){
var url = 'file:///'+Ext.get('imageUpload').dom.value;
if(img_reg.test(url)){
if(Ext.isIE7){
var image = Ext.get('imageBrowse').dom;
image.src = Ext.BLANK_IMAGE_URL;//覆盖原来的图片
image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src= url;
}else{
Ext.get('imageBrowse').dom.src = url;
}
}
},this);
},this);
},this);
var electron_win= new Ext.Window({
id:"electron_add_win",
title:'职工电子档案添加',
layout:'fit',
width:500,
height:600,
labelWidth:80,
labelAlign:'right',
buttonAlign:'center',
modal:true,
resizable:false,
frame:true,
animal:true,
items:[electron_form]
})