Ext中使用file类型预览图片
最近写一个系统,使用了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();}}]})varimg_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]})
?
?