//uploadFile.js
Ext.onReady(function() {
var fileForm = new Ext.form.FormPanel({
title : "",
renderTo : "fileUpload",
fileUpload : true,
layout : "form",
id : "fileUploadForm",
items : [{
id : 'upload',
name : 'upload',
inputType : "file",
fieldLabel : '上传图片',
xtype : 'textfield',
anchor : '40%'
}, {
xtype : 'box',
id : 'browseImage',
fieldLabel : "预览图片",
autoEl : {
width : 300,
height : 350,
tag : 'img',
// type : 'image',
src : Ext.BLANK_IMAGE_URL,
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
complete : 'off',
id : 'imageBrowse'
}
}],
//form事件
listeners : {
'render' : function(f) {
//
this.form.findField('upload').on('render', function() {
//通過change事件,图片也动态跟踪选择的图片变化
Ext.get('upload').on('change',
function(field, newValue, oldValue) {
//得到选择的图片路径
var url = 'file://'
+ Ext.get('upload').dom.value;
// alert("url = " + url);
//是否是规定的图片类型
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('upload').dom.files
.item(0).getAsDataURL()
}
}
}, this);
}, this);
}
},
buttons : [{
text : "提交",
name : "submit",
handler : submit
}]
});
// 上传图片类型
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/
});
//上傳圖片到服务器,
function submit() {
Ext.getCmp("fileUploadForm").getForm().submit({
url : "uploadAction.action",
method : "POST",
success : function(form, action) {
alert("success");
},
failure : function(form, action) {
alert("failure");
}
});
}