后台服务端接收文件的代码:
/** * 后台上传文件处理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();
时间: 2024-10-03 15:30:18