Ext.onReady(function () {
//窗体
var win = new Ext.Window({
title: '上传文件窗口',
width: 500,
height: 400,
resizable: false,
modal: true,
closable: true,
closeAction: 'hide',
});
//表单面板
var addImageForm = new Ext.form.Panel({
border: false,
bodyPadding: 5,
id: 'addImageForm',
height: 350,
fieldDefaults: {anchor: '100%'},//填充父窗口
items: [
{
xtype: 'fieldset', title: '图片上传',
items: [
{
xtype: 'textfield',
fieldLabel: '图片描述:',
name: 'picDisc',
id: 'picDisc',
allowBlank: false,
emptyText: '请输入图片的描述信息'
}, {
xtype: 'filefield',
fieldLabel: '上传图片',
name: 'pic',//名称需要和服务端保持一致
id: 'pic',
buttonText: '选择文件',
listeners: {
change: function (btn, value, eOpts) {
var img = Ext.getCmp('img1');
var file = btn.fileInputEl.dom.files[0];
var url = URL.createObjectURL(file);
img.setSrc(url);
}
}
}
]
}, {
xtype: 'fieldset',
title: '图片预览',
layout: 'column',
items:
{
xtype: 'image',
width: 130,
height: 200,
id: 'img1'
}
}
],
buttons: [{
xtype: 'button',
text: '确认上传', handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/test/upload',
method: 'post',
submitEmptyText: false,
waitMsg: '请稍等,系统正在帮您添加',
success: function (form, action) {
Ext.MessageBox.alert('成功', action.result);
},
failure: function (form, action) {
Ext.MessageBox.alert('失败', action.result);
}
})
}
}
}, {
xtype: 'button',
text: '重置表单', handler: function () {
this.up('form').getForm().reset();
}
}]
});
win.items.add(addImageForm);
win.show();
});
extjs 文件上传
最新推荐文章于 2023-08-24 10:18:00 发布