Ext 图片上传及预览，兼容多中浏览器

1、说明x-form-el-browseImage可以通过开发人员工具在html代码中查得

//创建表单面板  
var buildFormPanel = function(){

formPanel = new Ext.form.FormPanel({
frame:true,
labelAlign:'right', //标签位置
labelWidth:80,
bodyStyle:'margin: 5 0 0 0',
width:500,
onSubmit: Ext.emptyFn, 
method:'POST', 
hight:250,
border:false,
buttonAlign : 'center', //按钮位置
enctype: 'multipart/form-data',
fileUpload : true,
layout:'form',
items:[
new Ext.form.FieldSet({
title: "基本信息",
width: 470,
height: 180,
layout:'column',
items:[
{
columnWidth:.5,
autoHeight:true,
layout:'form',
defaultType:'textfield',
style:'margin-top:5px',
itemsCls:'required',
anchor:'90%',
border:false,
items:
[
{fieldLabel : "id", name:"id",hidden:true},
{fieldLabel : "名称", name:"name",allowBlank:false},
add_type,
add_subject,
search_effect,
{fieldLabel : "生长环境", name:"growthEnvironment"},
dishStatus
]
},{
columnWidth:.5,
autoHeight:true,
layout:'form',
defaultType:'textfield',
style:'margin-top:5px',
itemsCls:'required',
anchor:'90%',
border:false,
items:
[
{
id : 'file-idx',
name : 'file',
inputType : "file",
xtype : 'textfield',
blankText:'上传图片不能为空',
anchor : '100%',
listeners:{
'render':function(e){
Ext.get('file-idx').on('change',function(field, newValue, oldValue){
var url = 'file://'+ Ext.get('file-idx').dom.value;
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(url)) {
if (Ext.isIE) {
document.getElementById("file-idx").select();
var path = document.selection.createRange().text; 
document.getElementById("x-form-el-browseImage").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
}// 支持FF
else 
{
Ext.get('imageBrowse').dom.src = URL.createObjectURL(Ext.get('file-idx').dom.files[0]);
}
}
else
{
Ext.MessageBox.alert("提示","上传图片格式不正确");
}
});
}
}
},
{
xtype : 'box',   
id : 'browseImage',
complete:'off',
fieldLabel : "预览",
autoEl : {
width : 140,
height:100,
border:true,
tag : 'img',
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',   
complete : 'off',   
id : 'imageBrowse'
}
}
]
}
]
}),
new Ext.form.FieldSet({
title: "简介",
width: 470,
height: 200,
layout:'column',
items:[
new Ext.form.TextArea({
height:180,
width:450,
maxLengthText:135,
name:'brief',
autoScroll:true
})
]
})
],
buttons:[
{
id:"sub",
text:'提交',
handler:function(){
if(formPanel.form.isValid()){
if(formPanel.isAdd) //添加
{
if(Ext.getCmp('file-idx').getValue()=='' || Ext.getCmp('file-idx').getValue()==null || Ext.getCmp('file-idx').getValue().length==0)
{
Ext.MessageBox.alert("提示","图片信息部能为空！");
}
else
{
formPanel.form.submit({
clienValidation:true,
waitMsg:'正在上传信息，请稍等...',
waitTitle:'提示',
url:'<%=path %>/greenLease/addGreenLeaseInfo.do',
method:'POST',
success:function(form,action){
alert("提交成功");
store.reload({params:{start:0,limit:50}});
win.hide();
},
failure:function(form,action){
Ext.MessageBox.show({title: '失败',msg: '上传失败!',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
}
});
}
}
else //修改
{
formPanel.form.submit({
clienValidation:true,
waitMsg:'正在上传信息，请稍等...',
waitTitle:'提示',
url:'<%=path %>/greenLease/editGreenLeaseInfo.do',
method:'POST',
success:function(form,action){
alert("提交成功");
formPanel.form.getEl().dom.reset();
store.reload({params:{start:0,limit:50}});
win.hide();
},
failure:function(form,action){
Ext.MessageBox.show({title: '失败',msg: '上传失败!',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
}
});
}
}
}
},
{
id:"cancel",
text:'取消',
handler:function(){
formPanel.form.reset();
win.hide();
}
}
]
});
};