EXTJS图片上传预览(含本地上传前预览和服务器图片预览)

//生成messagePanel
createMessagePanel:function(){
return Ext.create('Ext.panel.Panel',{
itemId:'compPanel',
layout:'anchor',
autoScroll:true,
border:false,
items: [
{layout:'column',border:false,anchor:'-20',items:[
{
columnWidth:1,
layout:'form',
border:false,
items:[{
xtype: 'textfield',
itemId: 'upload_image',
id: 'upload_image',
name: 'file',
inputType: 'file',
fieldLabel: '上传照片',
emptyText : '选择文件存放路径',
//                            allowBlank: false,
listeners: {
'render': Ext.bind(this.onShowImg, this)
}
}]
}
]},
{layout:'column',border:false,anchor:'-20',items:[
{
columnWidth:.25,
layout:'form',
border:false,
items:[{
xtype: 'panel',
border:false
}]
},
{
columnWidth:.75,
layout:'form',
border:false,
items:[{
xtype: 'box',
itemId: 'imageShow_box',
autoEl: {
width: 100,
height: 100,
tag: 'img',
type: 'image',
src: 'images/nofoundimage.png',
style: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:160px;height:160px;text-align:center;',
complete: 'off'
}
}]
}
]},
{layout:'column',border:false,anchor:'-20',items:[
{
columnWidth:1,
layout:'form',
border:false,
items:[{
xtype:'textarea',
width:'100%',
itemId:'content',
fieldLabel:'内容',
name:'content',
height:75
}]
}
]}
]
});
},

onShowImg: function(){//图片预览
var formPanel = this.formPanel;
var uploadImage = formPanel.down('textfield[itemId=upload_image]');
uploadImage.on('change', function(e, t, eOpts){
//上传图片类型,在前台的拦截
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
//得到选择的图片路径
var path = uploadImage.getValue();
if(path!=null && !Ext.isEmpty(path)) {
var url = "file://" + path;
//是否是规定的图片类型
if (img_reg.test(url)) {
var imageShow_box = formPanel.down('box[itemId=imageShow_box]');    //预览的图片框对象
if (Ext.isIE) {//IE浏览器
var imageShow_box_dom = imageShow_box.getEl().dom;
imageShow_box_dom.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
imageShow_box_dom.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
} else {
var file = uploadImage.inputEl.dom.files[0];
var imageShow_box_dom = imageShow_box.getEl().dom;
imageShow_box_dom.src = window.URL.createObjectURL(file);
}
} else {
Ext.Msg.alert('提示','请选择图片类型的文件！');
}
}
}, this);
}

if (Ext.isIE) {//IE浏览器
　　imageShow_box_dom.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
　　imageShow_box_dom.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
} else {
　 imageShow_box_dom.src = path;
}