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

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值