`
erikchang
  • 浏览: 49727 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

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

 

 

  • 大小: 184.2 KB
分享到:
评论

相关推荐

    上传,页面预览,ftp传输

    预览功能使用的是项目中的 yuLanFile文件夹中的文件 页面index.jsp是jqueryUpload上传 以及上传后删除功能 页面yuLan.jsp是页面文件预览功能~~ ***********最重要的是 文件预览功能*********** Word和Excel预览...

    javascript图片预览和上传(兼容IE)

    本文实例为大家分享了js图片预览和上传的具体代码,供大家参考,具体内容如下 var dailiApply = { change: function (evt) { evt.preventDefault(); var pic = document.getElementById("preview"), file = ...

    Python图像处理库Pillow入门(含代码).pdf

    缩略图是网络开发或图像软件预览常用的一种基本技术,使用 Python 的 Pillow 图像库可以很方便的建立缩略图,如下: ``` # create thumbnail size = (128, 128) for infile in glob.glob("E:/photoshop/*.jpg"): f,...

    解决Extjs上传图片无法预览的解决方法

    代码如下: { width: 450, fileUpload: true, fieldLabel: ‘选择图片’, items: [{ xtype: ‘textfield’, id: ‘up_forth’, name: ‘up_forth’, inputType: ‘file’, width: 300 }] } 预览box 代码如下: { ...

    PHPCMS V9.6.6 修改版

    57. 新增获取远程附件扩展名get_file_ext函数 58. 新增栏目面包屑导航dr_catpos函数 59. 新增手机栏目面包屑导航dr_mobile_catpos函数 60. 新增手机分页函数mobilepages 61. 新增重新日志记录函数log_message 62. ...

Global site tag (gtag.js) - Google Analytics