extjs4 图片上传预览
2015-11-30 13:29
429 查看
var fileField = new Ext.form.field.File({
buttonText: '上传图片',
buttonOnly: true,
name: 'cover',
margin: '10 0 0 0',
listeners:
{
change: function (btn, v)
{
//是否是规定的图片类型
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
if (img_reg.test(v))
{
//如果是IE
if (Ext.isIE)
{
cover.setSrc(Ext.BLANK_IMAGE_URL); //覆盖原来的图片
var fileDom = btn.fileInputEl.dom;
fileDom.select();
cover.imgEl.dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = document.selection.createRange().text;
}
else
{
//支持FF,Chrome
var file = btn.fileInputEl.dom.files[0];
var url = URL.createObjectURL(file); //通过createObjectURL获取url
cover.height = 150;
cover.width = 200;
cover.setSrc(url);
}
}
else
{
Ext.Msg.alert('提示', '请选择图片类型的文件!');
return;
}
}
}
});
buttonText: '上传图片',
buttonOnly: true,
name: 'cover',
margin: '10 0 0 0',
listeners:
{
change: function (btn, v)
{
//是否是规定的图片类型
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
if (img_reg.test(v))
{
//如果是IE
if (Ext.isIE)
{
cover.setSrc(Ext.BLANK_IMAGE_URL); //覆盖原来的图片
var fileDom = btn.fileInputEl.dom;
fileDom.select();
cover.imgEl.dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = document.selection.createRange().text;
}
else
{
//支持FF,Chrome
var file = btn.fileInputEl.dom.files[0];
var url = URL.createObjectURL(file); //通过createObjectURL获取url
cover.height = 150;
cover.width = 200;
cover.setSrc(url);
}
}
else
{
Ext.Msg.alert('提示', '请选择图片类型的文件!');
return;
}
}
}
});
// 图片显示的区域 var cover = Ext.create('Ext.Img', { src: Ext.BLANK_IMAGE_URL, width: 200, height: 150, style: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' //必不可少,否则IE下无法预览 }); var myFormUpload = new Ext.form.FormPanel( { baseCls: 'x-plain', labelWidth: 80, fileUpload: true, defaultType: 'textfield', items: [cover, fileField] }); var batchWin = Ext.create('Ext.window.Window', { title: '批量新增', width: 580, height: 380, items: [myFormUpload], closeAction: 'hide', closeable: true, //resizable : true, iconCls: 'modalWin', buttonAlign: 'center', buttons: [ { text: '保存', handler: function () { //Ext.Msg.alert('保存', '表单提交'); } }, { text: '取消', handler: function () { batchWin.hide(); //mainForm.getForm().reset(); //Ext.Msg.alert('取消', '取消按钮'); } }] });
相关文章推荐
- [Javascript Practice] get-element-by-id -> getElementById
- jsp页面启用EL表达式
- JavaScript HTML DOM 元素(节点)
- jsp中引入外部js文件时需要注意的关键点
- [Javascript Practice] 数组扁平化处理
- 完美的js继承
- javascript如何暂停运行若干秒(sleep())
- 表单验证插件-validator.js 使用教程
- [Javascript String Math] String Methods, eval(), Math Methods
- Javascript禁止网页复制粘贴效果,或者复制时自动添加来源信息
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
- js自定义进度条
- js创建对象之设计模式
- fastjson解析数据
- Js内存泄漏及解决方案
- js+HTML5实现视频截图的方法
- javascript for-in有序遍历json数据并探讨各个浏览器差异
- 在jsp页面,只让按钮点击一下有用,点击第二下无效,需要刷新一下
- js简易检测密码强度
- 解析JSON的2种方式