论坛首页 Web前端技术论坛

Ext中使用file类型预览图片

浏览 4786 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-06-22   最后修改:2009-06-22

最近写一个系统,使用了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]
		})

 

 

  • 大小: 184.2 KB
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics