ExtJS + fileuploadfield上传文件代码

时间:2022-05-06 21:31:51

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

/**
* 后台上传文件处理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. iOS上传文件代码,自定义组装body

    以下代码为上传文件所用代码,简单方便,搞了好久,终于知道这么简单的方式来上传. 其它类库也就是把这几句代码封装的乱七八糟得,让你老久搞不懂原理.不就是在body上面加点字符串,body下面加点字符串, ...

  2. php 上传文件代码

    通过 PHP,能够把文件上传到server.里面加入一些图片的推断,假设不加推断文件的类型就能够上传随意格式的文件. 为了站点的安全,肯定不让上传php文件,假设有人进入你的后台,上传了一个php文件 ...

  3. java上传文件代码

    import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...

  4. PHP上传文件代码练习2 (重复文章)

    表单: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

  5. SpringMvc通过controller上传文件代码示例

    上传文件这个功能用的比较多,不难,但是每次写都很别扭.记录在此,以备以后copy用. package com.**.**.**.web.api; import io.swagger.annotatio ...

  6. php上传文件代码解析

    思想:把html的input标签组织成一个数组,然后去重 关键技术涉及的函数 is_dir mkdir move_uploaded_file() 涉及的数组 预定义数组$_FILES 步骤一:检查上传 ...

  7. git 和码云的上传文件代码操作

    Git与Github的连接与使用 一 安装git软件 1.git介绍 ''' git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.​ 分布式相比于集中式的最大区别在于开发 ...

  8. javaWeb上传文件代码

    javaweb两种方式的上传,1普通上传,2:jquery ajax后台上传,部分截图如下: 完成包下载,下载后倒入myeclipse工程即可,下载地址:http://files.cnblogs.co ...

  9. easyui 上传文件代码

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.IO;usi ...

随机推荐

  1. C&num;索引器

    索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不同的是索引器的访问是带参的. 索引器和数组比较: (1)索引器的索引值(Index)类型不受限制 (2)索引器允许重载 ...

  2. mysql 添加用户并授权

    mysql> create database dogDB; mysql> CREATE USER 'dog'@'%' IDENTIFIED BY '123456'; mysql> g ...

  3. 用GSON解析Json格式数据

    GSON是谷歌提供的开源库,用来解析Json格式的数据,非常好用.如果要使用GSON的话,则要先下载gson-2.2.4.jar这个文件,如果是在Android项目中使用,则在Android项目的li ...

  4. SQL静态

    静态 1.普通成员普通成员都是属于对象的用对象调用 2.静态成员静态成员是属于类的用类名调用 class FenBi{public int length;//普通成员public string col ...

  5. UVA 103 Stacking Boxes &lpar;dp &plus; DAG上的最长路径 &plus; 记忆化搜索&rpar;

     Stacking Boxes  Background Some concepts in Mathematics and Computer Science are simple in one or t ...

  6. Net 自定义Excel模板导出数据

    转载自:http://www.cnblogs.com/jbps/p/3549671.html?utm_source=tuicool&utm_medium=referral 1 using Sy ...

  7. Linux系统备份与恢复

    序言:前面一篇文章简单地介绍了Linux系统备份与恢复的相关概念,这里接着上一篇介绍两个常用的备份与恢复命令. 1  常见的备份命令 在介绍下面的备份恢复命令之前先简单的说明一下: 如果我们只是要实现 ...

  8. &lbrack;UE4&rsqb;Child Widget中的事件调度器

    在Child Widget中新建事件调度器,就会自动在使用该Child Widget的父级界面的事件列表中自动自动出现.功能十分强大.

  9. easyUi弹出window窗口传值与调用父页面的方法&comma;子页面给父页面赋值

    <!-- 父页面 --> <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "ht ...

  10. C&num;程序集系列03&comma;引用多个module

    我们经常在项目中引用程序集.通常情况下,一个程序集包含一个module,但一个程序集也可以包含多个module.本篇就来体验:在一个可以被编译成.exe可执行文件的.cs文件中引用多个module. ...