{
columnWidth: .9,
layout: 'form',
border: false,
items : [{
inputType : "file",
fieldLabel: '上传图片',
name: 'imageupload',
id:'imageupload',
xtype: 'textfield',
anchor: '40%'
}]
},
{
columnWidth: .5,
layout: 'form',
border: false,
items : [
{
xtype: 'box',
id : 'browseImage',
fieldLabel : "预览图片",
autoEl : {
width : 100,
height : 150,
tag : 'img',
//type : 'image',
src : Ext.BLANK_IMAGE_URL,
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
complete:'off',
id : 'imageBrowse'
}
}
]
}
这是构造上传的FILE的代码,网上看到很多autoCreate代替autoEl,不过查了下最新的3.2版本的API没发现这个,component只有autoEl配置项。
下面是处理预览的代码
//上传图片类型
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/
Ext.extend(simpleForm,Ext.form.FormPanel,{
listeners:
{
'render':function(f)
{
this.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.isIE)
{
var image = Ext.get('imageBrowse').dom;
image.src = Ext.BLANK_IMAGE_URL;//覆盖原来的图片
image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=url;
}//支持FF
else
{
Ext.get('imageBrowse').dom.src =Ext.get('imageupload').dom.files.item(0).getAsDataURL()
}
}
},this);
},this);
}
}
});
分享到:
相关推荐
批量图片预览上传(extjs,支持html5和flash)
Extjs 批量上传图片,选择多个图片可批量删除操作,
一款ExtJS的带进度条的多文件上传和图片预览,此项目不仅可同时上传多个文件,且上传过程中带进度显示,上传完成后还有相关图片的预览……
extjs 不提供 asp上传的方法,这个作为补充来用吧
网上找了好多EXTJS上传图片预览的,但都不行,,,下面虽然IE8可以但肯定还存在其它浏览器的兼容性问题,待搁应付一下吧
此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...
Extjs图片上传,更多资料请见我的资源:Extjs3.1.1官方实例Asp.net版http://download.csdn.net/source/2709967
extjs htmleditor 图片上传和添加网络图片编辑器
Extjs4文件上传,后台struts2
extjs中用于图片上传,实现多张图片的预览,及上传,删除,同时支持extjs3.*
ExtJS验证文件上传类型,详细讲述ExtJS如何验证文件上传文件的类型!
可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化选择文件列表源 initStore(files) //base64路径转文件类型 baseImgURL2File(url, type, name, id, callback) //图片...
EXTJS 上传组件及示例EXTJS 上传组件及示例EXTJS 上传组件及示例
此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...
完整的Extjs4 htmleditor上传图片插件(包括实例和用法) 有图片上传的前台和后台代码
Extjs 文件上传 strut2
对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法(实例) 》:http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。
extjs 多文件上传extjs 多文件上传
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
EXTjs批量上传下载功能