后台服务端接收文件的代码：
/**
* 后台上传文件处理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();