项目中需要在表单中使用图片上传且预览组件,网上搜了下解决方案,实在是没什么可参考,于是自己动手写了个,效果如下:
使用如下:
{ fieldLabel : "头像", xtype : "imagefield", value : "images/example/default_pic.png2", btnCfg : { text : "上传", scope : this, handler : function(a,d){ alert(a.getValue()) a.setValue("images/example/default_pic.png") } } }
实现代码:
/** * 图片框 Ext.form.ImageField * @cfg btnCfg 配置形如 { text : "click", handler :function(imageFiled){ }, scope : this }} @cfg imgCfg : { cls : "", style : "margin: 0px 0px 1px; border: 1px solid rgb(204, 204, 204); width: 100; height: 100px;" */ Ext.form.ImageField = Ext.extend(Ext.form.DisplayField,{ initComponent : function(){ this.initContents(); Ext.form.ImageField.superclass.initComponent.call(this); }, //private initContents : function(){ this.btnId = Ext.id(); this.imgId = Ext.id() this.btnCfg = Ext.applyIf(this.btnCfg||{},{ text : "click", handler :Ext.emptyFn, scope : this }) this.imgCfg = Ext.applyIf(this.btnCfg||{},{ cls : "", style : "margin: 0px 0px 1px; border: 1px solid rgb(204, 204, 204); width: 100; height: 100px;" }) this.html = '<img id="'+this.imgId+'" style="'+this.imgCfg.style+'" src="'+(this.value||Ext.BLANK_IMAGE_URL)+'" >' + '<br> <input size="20" type="button" ' +'value="'+this.btnCfg.text+'" id="'+this.btnId+'">'; }, //override afterRender : function(){ Ext.form.ImageField.superclass.afterRender.call(this); this.addBtnClickEvent.defer(100,this); }, //private addBtnClickEvent : function(){ Ext.fly(this.btnId).on("click",this.btnCfg.handler.createDelegate(this.btnCfg.scope,[this])); }, //override initValue : Ext.emptyFn, //override getRawValue : function(){ var imgEl = Ext.fly(this.imgId); if(imgEl){ return imgEl.getAttribute("src"); } return ""; }, //override setRawValue : function(v){ var imgEl = Ext.fly(this.imgId); if(imgEl){ imgEl.dom.setAttribute("src",v); } return true; }, destroy : function(){ if(!this.isDestroyed){ Ext.fly(this.btnId).removeAllListeners () ; } Ext.form.ImageField.superclass.destroy.call(this); } }) Ext.reg('imagefield', Ext.form.ImageField);
相关推荐
Extjs 批量上传图片,选择多个图片可批量删除操作,
批量图片预览上传(extjs,支持html5和flash)
一款ExtJS的带进度条的多文件上传和图片预览,此项目不仅可同时上传多个文件,且上传过程中带进度显示,上传完成后还有相关图片的预览……
漂亮的Extjs图片展示组件实例,类似于幻灯片,可直接拿去用,非常不错的哦
Extjs图片上传,更多资料请见我的资源:Extjs3.1.1官方实例Asp.net版http://download.csdn.net/source/2709967
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
通过这个观看视频会让你很快的了解到extjs,并且能够很快的进入ext的使用
用extjs实现的多文件上传,界面很好看,而且很好用的,失望大家试试看
extjs中用于图片上传,实现多张图片的预览,及上传,删除,同时支持extjs3.*
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
批量上传文件,完整的列子,部署既可以使用,
EXTJS 上传组件及示例EXTJS 上传组件及示例EXTJS 上传组件及示例
没有完全实现的是extjs用uploadfild控件实现的blob数据上传预览,并且尝试了用smart组件上传,但在我的环境里还有问题,大家可以改进一下,本人觉得有总比没有强哈 有问题的可以加qq群103684733
extjs htmleditor 图片上传和添加网络图片编辑器
ExtJS验证文件上传类型,详细讲述ExtJS如何验证文件上传文件的类型!
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
环境为java,struts2,extjs...没有完全实现的是extjs用uploadfild控件实现的blob数据上传预览,并且尝试了用formFile上传文件、和smart组件上传,但两者在我的环境里还有问题,大家可以改进一下,本人觉得有总比没有强哈
完整的Extjs4 htmleditor上传图片插件(包括实例和用法) 有图片上传的前台和后台代码
Extjs4文件上传,后台struts2
NULL 博文链接:https://mackyhe.iteye.com/blog/1002134