后台服务端接收文件的代码:

/**
* 后台上传文件处理Action
*/
@RequestMapping(value = "/uploadFile", method=RequestMethod.POST)
public void uploadFile(@RequestParam(value="file",required=true) MultipartFile file ,HttpServletResponse response) {
ModelMap modelMap = new ModelMap();
String savePath = "D:/tmp/";//保存路径 try {
String fileName = file.getName();
File saveFile = new File(savePath);
if(!saveFile.exists()){
saveFile.mkdirs();
}
saveFile = new File(savePath, fileName);
file.transferTo(saveFile);
modelMap.addAttribute("success", true);
} catch (Exception e) {
modelMap.addAttribute("success", false);
modelMap.addAttribute("message", "保存失败:"+e.getMessage());
} JSONSerializer serializer = new JSONSerializer();
String result = serializer.serialize(modelMap);
//ExtJS上传需要用这种方法实现返回
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
writer.write(result);
writer.flush();
writer.close();
}

刚开始使用 return modelMap 返回信息,但是前台就是接收不到数据,最后看API后使用PrintWriter来搞定。

附上前台上传窗口代码:

UploadForm = Ext.extend(Ext.Window,{
constructor : function(a){
Ext.applyIf(this,a);
this.initUIComponents();
UploadForm.superclass.constructor.call(this,{
layout : 'fit',
modal : true,//遮罩层
constrain : true,
width : 500,
height : 200,
title : '选择上传文件窗口',
items : this.formPanel,
buttonAlign : 'center',
keys : [{
key : Ext.EventObject.ENTER,
scope: this,
fn: this.uploadFile
}],
buttons : [{
text : '保存',
scope : this,
iconCls : "btn-save",
handler: this.uploadFile
},{
text : '取消',
scope : this,
iconCls : "btn-cancel",
handler : function(){
this.close();
}
}]
});
},
initUIComponents : function(){
this.formPanel = new Ext.FormPanel({
layout : 'form',
fileUpload: true,
border : false,
method:'POST',
enctype:'multipart/form-data',
bodyStyle : 'padding: 10px 10px 0 10px;',
url : _ctx + '/fuile/uploadFile.do',
defaults : {
anchor : '100%'
},
labelAlign : 'right',
items : [
{xtype : 'hidden',name : 'userId',value : this.userId},
Ext.Util.buildColumnForm(1,'textfield',{
fieldLabel : '备注信息',
name : 'remark',
allowBlank : false,
maxLength : 100,
maxLengthText : '信息长度小于等于100个字符'
}),
{
xtype: 'fileuploadfield',
id: 'form_file',
fieldLabel : '脚本上传',
name : 'file',//后台接收
emptyText: '请上传word文档',
buttonText: '',
regex : /\.(doc|docx)$/,
regexText : "请上传word文档",
buttonCfg: {
iconCls: 'btn-upload-icon'
}
}
]
});
},
uploadFile : function(){
var win = this;
var formFile = Ext.getCmp('form_file').getValue();
if(this.formPanel.getForm().isValid()){
if(formFile==''){
Ext.Msg.alert("操作提示:", "请上传word文件然后保存");
return;
}
this.formPanel.getForm().submit({
url: ctx + '/file/uploadFile.do',
waitMsg: '正在保存...',
success : function(form, action){
var result = Ext.decode(action.response.responseText);
Ext.Msg.alert(result.message, "");
win.close();
},
failure: function(form, action) {
var result = Ext.decode(action.response.responseText);
Ext.Msg.alert("错误提示", result.message);
}
});
}
}
}); 调用方法 new UploadForm({userId : '34567'}).show();

ExtJS + fileuploadfield实现文件上传的更多相关文章

  1. 62. ExtJS + fileuploadfield实现文件上传

    转自:https://www.cnblogs.com/yzuzhang/p/5128174.html 后台服务端接收文件的代码: /** * 后台上传文件处理Action */ @RequestMap ...

  2. [转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

  3. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  4. ExtJs文件上传(Ext.ux.form.FileUploadField)

    Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { /**  * @cfg {String} buttonText The b ...

  5. extjs采用fileupload进行文件上传后台实现

    前台js: form: Ext.define("GS.base.BasicImportForm",{    extend:"Ext.form.Panel",   ...

  6. 自定义ExtJS文件上传

    日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式: { xtype: 'fileuploadfield' ...

  7. struts2+extjs文件上传完整实现(攻克了上传中的各种问题)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...

  8. PHP+ExtJS 文件上传示例

    xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器.本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能. 首先,创建文件上传组件Ext.form.Panel ...

  9. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

随机推荐

  1. rgb2yuv

    1.rgb2yuv422p 代码的运算速度取决于以下几个方面 1. 算法本身的复杂度,比如MPEG比JPEG复杂,JPEG比BMP图片的编码复杂. 2. CPU自身的速度和设计架构 3. CPU的总线 ...

  2. mfc小工具开发之定时闹钟之---时间获取和音频播放

    1.这里的音频文件是指*.wav格式的音频,参考了飞雪的音频文件,版本号: 飞雪桌面日历 v2.84.1025 绿色版 http://www.piaodown.com/down/soft/18512. ...

  3. 多线程之使用读写锁ReentrantReadWriteLock实现缓存系统

    简单地缓存系统:当有线程来取数据时.假设该数据存在我的内存中.我就返回数据.假设不存在我的缓存系统中,那么就去查数据库.返回数据的同一时候保存在我的缓存中. 当中涉及到读写问题:当多个线程运行读操作时 ...

  4. java获取系统时区

    //Calendar cal = Calendar.getInstance(); //TimeZone timeZone = cal.getTimeZone(); TimeZone timeZone ...

  5. Python_selenium之处理Alert窗

    Python_selenium之处理Alert窗 一.介绍 1. 介绍如何通过switch_to方法处理网页Alert窗口 2. 然后我们自己创建一个alert弹窗进行操作 二.测试脚本 1. 测试脚 ...

  6. 高质量JavaScript代码

    才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...

  7. c++新特性---引用变量

    一.定义 引用变量是已定义变量的别名,如将ra设置为a的引用变量,则可以使用ra和a交替使用该变量. 表示: int a = 5; int & ra = a; 其中&不是地址运算符,而 ...

  8. Duilib教程-自动布局1

    我们要实现一个带标题栏和状态栏的程序,同时要支持拉伸,即包括最小化.最大化,图如下: XML: <?xml version="1.0" encoding="utf- ...

  9. 认识tornado(二)

    前面我们对 Tornado 自带的 hello world 作了代码组织上的解释,但是没有更加深入细致地解释.这里我们直接从main()函数开始,单步跟随,看看tornado都干了些什么. 下面是 m ...

  10. poj2046

    Gap Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 1829   Accepted: 829 Description Le ...