示图如下:
前台展示代码如下:
var upload=function (callFunc) {
var i = 0;
var currentField;
function getUploadField(callFun) {//增加一行文件框
var fileName = "文件 " + (++i) + " : ";
var uploadFileTf = new Ext.form.TextField({
xtype : 'textfield',
columnWidth : .7,
name : 'file',
inputType : 'file',
allowBlank : false,
blankText : '请选择上传文件',
anchor : '90%'
});
var lbl = new Ext.form.Label({
text : fileName,
columnWidth : .15,
style : 'font-weight:bold;vertical-align: middle'
});
var fieldSet = new Ext.form.FieldSet({
layout : 'column',
border : false
});
fieldSet.add(lbl);
fieldSet.add(uploadFileTf);
if (i != 1) {
var deleteBtn = new Ext.Button({
text : '删除',
icon : MCLONIS + "/js/images/delete.gif",
columnWidth : .15,
handler : function() {
fieldSet.destroy();
upload_win.setHeight(upload_win.getHeight() - 37);
uploadForm.doLayout(true);
}
});
fieldSet.add(deleteBtn);
}
return fieldSet;
}
//上传form
var uploadForm = new Ext.form.FormPanel({
baseCls : 'x-plain',
labelWidth : 80,
// layout:'fit',
autoHeight:true,
style:'margin-top:10',
frame : true,
disabledClass : "x-item-disabled",
tbar : [{
xtype : 'button',
text : '添加上传',
labelAlign : 'right',
icon : KANGSOFT + "/js/images/add_16.gif",
handler : function() {
var uf = getUploadField();
uploadForm.add(uf);
uploadForm.doLayout(true);
upload_win.setHeight(upload_win.getHeight()
+ 47);
}
}, {
xtype : 'label',
text : '(单个最大允许上传50M)'
}],
url : MCLONIS + '/sm/fileUploadAction!fileUpLoad.action',
fileUpload : true,
defaultType : 'textfield',
items : [getUploadField()]
});
var upload_win = new Ext.Window({
title : '文件上传',
width : 500,
layout : 'fit',
plain : true,
bodyStyle : 'padding:5px;',
buttonAlign : 'center',
items : uploadForm,
resizable : false,
closeAction : 'close',
loadMask : true,
height:160,
buttons : [{
text : '开始上传',
icon : MCLONIS + "/js/images/upload.png",
handler : function() {
if (uploadForm.form.isValid()) {
Ext.MessageBox.show({
title : 'Please wait',
msg : '上传中...',
progressText : '- - - -上传中- - - -',
width : 300,
progress : true,
closable : false,
animEl : 'loding'
});
uploadForm.getForm().submit({
success : function(form, action) {
var result = Ext.util.JSON
.decode(action.response.responseText);
Ext.Msg.alert('信息提示', result.message);
var fn = callFunc.createCallback(result);
fn();
upload_win.hide();
},
failure : function() {
Ext.Msg.alert('信息提示', '文件上传失败');
upload_win.show();
}
})
}
}
}, {
text : '关闭',
icon : MCLONIS + "/js/images/btn-cancel.png",
handler : function() {
upload_win.hide();
}
}]
});
upload_win.show();
}
后台部分根据需要实现
注:由于是支持多文件所以后台接收应该写为
private List<File> file;//上传文件
private List<String> fileFileName;// 使用列表保存多个上传文件的文件名
针对struts2.x
- 大小: 14.4 KB
分享到:
相关推荐
使用ExtJs2.0+SSH开发的结构,可以进行文件上传,以及数据的管理,用户的登录,通过数据库数据操行操作树形结构等功能
ExtJS + JSP 实现表单上传进度条,并且根据上传的字节数动态更新进度条。部署和测试都很简单,直接把progress.zip解压在tomcat/webapps/ROOT下面就可以用http://localhost:8080/upload.html测试。
三、Ajax文件上传 67 四、你来自远方 72 五、小结 73 第十二章:分页与ComboBox 74 一、关于分页 74 二、从Servlet获取当前页数据 74 三、创建ComboBox 76 四、小结 77 第十三章:面板(Panel) 78 一、漂亮的窗格从...
4.1.21 Ext.form.field.File文件上传字段 4.2 实现表单验证 4.2.1 常见的验证类型 4.2.2 表单验证(VType) 4.2.3 自定义VType验证 4.3 表单的提交和加载 4.3.1 Ext.form.action.Action基础 4.3.2 Ajax模式的...
10.2.1 最简单的grid / 520 10.2.2 列的配置项 / 521 10.2.3 自定义单元格的显示格式 / 523 10.2.4 通过列对象定义单元格的显示格式 / 525 10.2.5 设置行的背景颜色 / 532 10.2.6 列标题的分组 / 533 10.2.7 ...
该库支持Ext Direct的所有功能: 带有注释的配置简单的远程通话命名参数方法批量表格发布带有文件上传的表单发布轮询查看正在使用的库: : 玛文可从Central Maven存储库中获得ExtDirectSpring。 <dependency> ...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...
注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...
4.9. 还要做文件上传哟 4.10. 非想非想,单选框多选框 4.10.1. 多选呢checkbox 4.10.2. 单选呢radio 5. 雀跃吧!超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 5.2. 先看看最基本的三个...
4.9. 还要做文件上传哟 4.10. 非想非想,单选框多选框 4.10.1. 多选呢checkbox 4.10.2. 单选呢radio 5. 雀跃吧!超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 5.2. 先看看最基本的三个例子...
4.9. 还要做文件上传哟 4.10. 非想非想,单选框多选框 4.10.1. 多选呢checkbox 4.10.2. 单选呢radio 4.11. 自动把数据填充到form里 5. 雀跃吧!超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 ...