码迷,mamicode.com
首页 > Web开发 > 详细

ExtJS + fileuploadfield上传文件代码

时间:2016-01-13 19:41:19      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:

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

 

/**
  * 后台上传文件处理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上传文件代码

标签:

原文地址:http://www.cnblogs.com/yzuzhang/p/5128174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!