62. ExtJS + fileuploadfield实现文件上传

转自：https://www.cnblogs.com/yzuzhang/p/5128174.html

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

 

/**
  * 后台上传文件处理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();