标签:
后台服务端接收文件的代码:
/**
* 后台上传文件处理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();
标签:
原文地址:http://www.cnblogs.com/yzuzhang/p/5128174.html