您的位置:首页 > Web前端 > JavaScript

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;
}
}
}
});
// 图片显示的区域
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('取消', '取消按钮');
}
}]
});


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: