点击浏览弹出选择文件
确定后:
呵呵不错啊
代码如下:
Ext.ui.ImageUploadField = Ext.extend(Ext.form.TextField, { autoCreate : { cls : 'x-form-field-wrap x-form-file-wrap', style : 'position:relative;height:auto;' }, setValue : function(new_value) { this.value = new_value; if (this.rendered) { if (new_value == undefined || new_value == null) { this.img.dom.src = this.defaultUrl || Ext.BLANK_IMAGE_URL; } else { this.img.dom.src = new_value; } this.img.on("load", function() { this.fireEvent("imgload"); }, this, { single : true }); } }, initComponent : function() { Ext.ui.ImageUploadField.superclass.initComponent.apply(this, arguments); var me = this; this.on("imgload", function() { this.reAlign(); }); }, initValue : function() { this.setValue(this.value); }, getValue : function() { return this.fileField.dom.value; }, getRawValue : function() { return this.fileField.dom.value; }, reAlign : function() { this.button.el.anchorTo(this.el, "r-r"); this.fileField.anchorTo(this.el, "r-r"); }, onRender : function(ct) { Ext.ui.ImageUploadField.superclass.onRender.apply(this, arguments); this.img = this.el.createChild({ tag : 'img', src : Ext.BLANK_IMAGE_URL, height : this.imgHeight || 50, style : 'border:1px solid #cfcfcf;' }); this.img.on("load", function() { this.fireEvent("imgload"); }, this, { single : true }) this.fileField = this.el.createChild({ tag : 'input', type : 'file', style : 'position: absolute;right: 0;-moz-opacity: 0;filter:alpha(opacity: 0);opacity: 0;z-index: 2;z-index:999;', name : this.name }); var btnCfg = this.buttonConfig || {}; this.button = new Ext.Button(Ext.apply(btnCfg, { renderTo : this.el, text : btnCfg.text || '浏览', cls : 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '') })); this.button.el.setStyle("position", "absolute"); this.reAlign(); this.fileField.on({ scope : this, change : function() { this.setValue(this.getFileFieldValue()); this.fireEvent('fileselected', this, this.getFileFieldValue()); } }); }, // 得到浏览器版本 getOs : function() { var OsObject = ""; if (navigator.userAgent.indexOf("MSIE") > 0) { return "MSIE"; } if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { return "Firefox"; } if (isSafari = navigator.userAgent.indexOf("Safari") > 0) { return "Safari"; } if (isCamino = navigator.userAgent.indexOf("Camino") > 0) { return "Camino"; } if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) { return "Gecko"; } }, getFileFieldValue : function() { // IE浏览器获取图片路径 function getImgUrlByMSIE(fileid) { return document.getElementById(fileid).value; } // 非IE浏览器获取图片路径 function getImgUrlByUnMSIE(fileid) { var f = document.getElementById(fileid).files[0]; return window.URL.createObjectURL(f); } var imgsrc = ""; var fid = this.fileField.id; if ("MSIE" == this.getOs()) { imgsrc = getImgUrlByMSIE(fid); } else { imgsrc = getImgUrlByUnMSIE(fid); } return imgsrc; }, setImgWidth : function(w) { if (w) { this.img.setWidth(w); } }, setWidth : function(w) { this.setImgWidth(w); Ext.ui.ImageUploadField.superclass.setWidth.apply(this, arguments); }, setSize : function(w, h) { // support for standard size objects if (typeof w == 'object') { h = w.height; w = w.width; } Ext.ui.ImageUploadField.superclass.setSize.apply(this, arguments); this.reAlign(); this.setImgWidth(w); } }); Ext.reg('imageuploadfield', Ext.ui.ImageUploadField);
呵呵完成
相关推荐
批量图片预览上传(extjs,支持html5和flash)
此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...
此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...
Extjs 批量上传图片,选择多个图片可批量删除操作,
一款ExtJS的带进度条的多文件上传和图片预览,此项目不仅可同时上传多个文件,且上传过程中带进度显示,上传完成后还有相关图片的预览……
EXTJS 强大的图片查看器 仿windows照片查看器
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
extjs中用于图片上传,实现多张图片的预览,及上传,删除,同时支持extjs3.*
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
extjs3+servlet实现图片上传功能,文件夹中的upload.jar包是第三方控件主要是处理前台传递过来的图片流
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
官方或网上ExtJS实现多文件上传的UploadDialog只适用于ExtJS2.x,我经过修改使其使用于ExtJS3.x,并在修改时尽量尊重于原始功能代码,请大家放心使用!
Extjs图片渲染效果Extjs图片渲染效果Extjs图片渲染效果Extjs图片渲染效果
extjs实现动态树
extjs htmleditor 图片上传和添加网络图片编辑器
Extjs图片上传,更多资料请见我的资源:Extjs3.1.1官方实例Asp.net版http://download.csdn.net/source/2709967
漂亮的Extjs图片展示组件实例,类似于幻灯片,可直接拿去用,非常不错的哦
将struts-2.1.6\lib目录下的struts2-codebehind-plugin-2.1.6.jar、struts2-core-2.1.6.jar、struts2-spring-plugin-2.1.6.jar、xwork-2.1.2.jar、ognl-2.6.11.jar、freemarker-2.3.13.jar、commons-fileupload-...
ExtJs3实现、简洁的、静态数据模拟的员工管理系统
手把手教你实现EXTJS+DWR实现图片上传功能