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

  1. /**
  2. * 后台上传文件处理Action
  3. */
  4. @RequestMapping(value = "/uploadFile", method=RequestMethod.POST)
  5. public void uploadFile(@RequestParam(value="file",required=true) MultipartFile file ,HttpServletResponse response) {
  6. ModelMap modelMap = new ModelMap();
  7. String savePath = "D:/tmp/";//保存路径
  8.  
  9. try {
  10. String fileName = file.getName();
  11. File saveFile = new File(savePath);
  12. if(!saveFile.exists()){
  13. saveFile.mkdirs();
  14. }
  15. saveFile = new File(savePath, fileName);
  16. file.transferTo(saveFile);
  17. modelMap.addAttribute("success", true);
  18. } catch (Exception e) {
  19. modelMap.addAttribute("success", false);
  20. modelMap.addAttribute("message", "保存失败:"+e.getMessage());
  21. }
  22.  
  23. JSONSerializer serializer = new JSONSerializer();
  24. String result = serializer.serialize(modelMap);
  25. //ExtJS上传需要用这种方法实现返回
  26. response.setContentType("text/html;charset=utf-8");
  27. PrintWriter writer = response.getWriter();
  28. writer.write(result);
  29. writer.flush();
  30. writer.close();
  31. }

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

附上前台上传窗口代码:

  1. UploadForm = Ext.extend(Ext.Window,{
  2. constructor : function(a){
  3. Ext.applyIf(this,a);
  4. this.initUIComponents();
  5. UploadForm.superclass.constructor.call(this,{
  6. layout : 'fit',
  7. modal : true,//遮罩层
  8. constrain : true,
  9. width : 500,
  10. height : 200,
  11. title : '选择上传文件窗口',
  12. items : this.formPanel,
  13. buttonAlign : 'center',
  14. keys : [{
  15. key : Ext.EventObject.ENTER,
  16. scope: this,
  17. fn: this.uploadFile
  18. }],
  19. buttons : [{
  20. text : '保存',
  21. scope : this,
  22. iconCls : "btn-save",
  23. handler: this.uploadFile
  24. },{
  25. text : '取消',
  26. scope : this,
  27. iconCls : "btn-cancel",
  28. handler : function(){
  29. this.close();
  30. }
  31. }]
  32. });
  33. },
  34. initUIComponents : function(){
  35. this.formPanel = new Ext.FormPanel({
  36. layout : 'form',
  37. fileUpload: true,
  38. border : false,
  39. method:'POST',
  40. enctype:'multipart/form-data',
  41. bodyStyle : 'padding: 10px 10px 0 10px;',
  42. url : _ctx + '/fuile/uploadFile.do',
  43. defaults : {
  44. anchor : '100%'
  45. },
  46. labelAlign : 'right',
  47. items : [
  48. {xtype : 'hidden',name : 'userId',value : this.userId},
  49. Ext.Util.buildColumnForm(1,'textfield',{
  50. fieldLabel : '备注信息',
  51. name : 'remark',
  52. allowBlank : false,
  53. maxLength : 100,
  54. maxLengthText : '信息长度小于等于100个字符'
  55. }),
  56. {
  57. xtype: 'fileuploadfield',
  58. id: 'form_file',
  59. fieldLabel : '脚本上传',
  60. name : 'file',//后台接收
  61. emptyText: '请上传word文档',
  62. buttonText: '',
  63. regex : /\.(doc|docx)$/,
  64. regexText : "请上传word文档",
  65. buttonCfg: {
  66. iconCls: 'btn-upload-icon'
  67. }
  68. }
  69. ]
  70. });
  71. },
  72. uploadFile : function(){
  73. var win = this;
  74. var formFile = Ext.getCmp('form_file').getValue();
  75. if(this.formPanel.getForm().isValid()){
  76. if(formFile==''){
  77. Ext.Msg.alert("操作提示:", "请上传word文件然后保存");
  78. return;
  79. }
  80. this.formPanel.getForm().submit({
  81. url: ctx + '/file/uploadFile.do',
  82. waitMsg: '正在保存...',
  83. success : function(form, action){
  84. var result = Ext.decode(action.response.responseText);
  85. Ext.Msg.alert(result.message, "");
  86. win.close();
  87. },
  88. failure: function(form, action) {
  89. var result = Ext.decode(action.response.responseText);
  90. Ext.Msg.alert("错误提示", result.message);
  91. }
  92. });
  93. }
  94. }
  95. });
  96.  
  97. 调用方法 new UploadForm({userId : '34567'}).show();
  1.  

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. 如何用redis/memcache做Mysql缓存层

    方法一:直接用MysqlMysql有缓存,实现了类似的功能,如果需要缓存的东西很多,可以把缓存的内存设置大一点.这样的好处就是不用去控制缓存的失效,确保数据一致性. 方法二:启用用DAO框架的缓存比如 ...

  2. What can be use as an encoder

    原于2018年5月在实验室组会上做的分享,今天分享给大家,希望对大家的科研有所帮助.

  3. 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  4. lighttpd mysql php简单教程

    lighttpd mysql php简单教程 lighttpd+php5+mysql+Debian etch lighttpd是速度最快的静态web server,mysql最通用的的database ...

  5. HTML-HTML链接JavaScript的几种方法

    把JavaScript文件放在head中 标准方法是把JavaScript文件放到head标签内. <head> <script type="text/javascript ...

  6. EditText ------- 键盘类型

    文本输入框指定软键盘类型和软键盘回车键图标设置, 转载:http://blog.csdn.net/wirelessqa/article/details/8567327

  7. std::deque

    deque容器为一个给定类型的元素进行线性处理,像向量一样,它能够快速地随机访问任一个元素,并且能够高效地插入和删除容器的尾部元素.但它又与vector不同,deque支持高效插入和删除容器的头部元素 ...

  8. IE的文档模式, 及Textarea呈现bug一例

    做了个非常简单的页面, 仅有几行html代码, 内容如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtm ...

  9. CF678D(Iterated Linear Function)

    题目链接:传送门 题目大意:略 题目思路:用题目所给函数推出表达式,然后用等比求和公式得到关系式套用即可(需用乘法逆元),也可直接构造矩阵,用矩阵快速幂求解. 感受:做题时一定要仔细,需要仔细注意什么 ...

  10. [Navicat] 常用快捷键及注意事项

    近来需要同时管理多种类型.多台server的数据库,在经历了各种查询客户端(SSMS, SQLyog, PL/SQL等)的不断切换,ip/user/pwd的反复输入的这种自虐式体验后,实在无法忍受,就 ...