EXTJS 客户端浏览图片并显示 一、 项目背景 根据项目需要，前台使用 EXTjs 开发，用户能够自己选择需要的图片，并且显示在页面上，然后把选择的图片上传的 Oracle 数据库中的 Blob 字段中。（关于图片上传功能请详见本人的另一篇文档《使用 EXTJS 和 JAVA对 Oracle 中的 blob 类型图片进行存取.doc》，这里不再详述） 二、 效果截图 1、 打开网页，显示默认图片 2、 选择图片 3、 显示选择图片 三、 代码 在工程里新建一个 JS 文件，把下面的代码复制过去就可以使用了 /* * @author beau4122 * 照片保存 */ Ext.onReady(function(){ var proj=new Ext.global.ProjtNam(); var projtnam=proj.name; var currentLogoPath='../images/run.jpg';//默认照片目录 var formRL = new Ext.FormPanel({ title: '照片保存', labelAlign: 'right', frame: true, renderTo:'formRL', bodyStyle: 'padding:0 10px 0;', height: 400, width: 600, buttonAlign: 'center', items: [ { height: 10 }, { layout: 'column', items:[ { columnWidth:.3 }, { columnWidth:.7, layout: 'form', items:[ { xtype : 'box', id : 'logoPic', width : 150, height : 200, autoEl : { tag : 'img', src : currentLogoPath, style: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' } }] }] },{ height: 85 },{ xtype : 'textfield', id : 'logoFile', name : 'logoFile', inputType : 'file', fieldLabel : '浏览图片地址', width : 390, listeners : { 'render':function(){ var logoFileCmp = Ext.get('logoFile'); logoFileCmp.on('change',function(field,newValue,oldValue){ var picPath = logoFileCmp.getValue(); var url = 'file:///' + picPath; if(Ext.isIE){ var image = Ext.get('logoPic').dom; image.src = '../ext/resources/images/default/s.gif'; image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url; }else{ //支持FF Ext.get('logoPic').dom.src =Ext.get('logoFile').dom.files.item(0).getAsDataURL(); } },this); } } } ], buttons: [ { text:'保存', handler: savePhoto }] }) function savePhoto(){ Ext.lib.Ajax.request( 'POST', '../SavePic', { success: function(response){ }, failure: function(response) { } }) } })
