首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Ext中运用file类型预览图片

2012-11-22 
Ext中使用file类型预览图片最近写一个系统,使用了Ext,涉及到图片预览功能,本来在html中是非常简单的问题,

Ext中使用file类型预览图片

最近写一个系统,使用了Ext,涉及到图片预览功能,本来在html中是非常简单的问题,到Ext中变得也很麻烦,自己也没有写过,找了一些资料,么有发现能用的,结合网上的一些资料,自己整理了一下,给代码贴一下!

??????????????????????????????????????????????? 最终效果图:?

Ext中运用file类型预览图片

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]})

?

?

热点排行