ExtJS + fileuploadfield上传文件代码

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

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

ExtJS + fileuploadfield上传文件代码的相关文章

jquery ajax实现上传文件代码,带进度条

原文:jquery ajax实现上传文件代码,带进度条 源代码下载地址:http://www.zuidaima.com/share/1550463291116544.htm ajax上传文件代码,带进度条的. 首页 http://localhost:端口/项目名/common/test.htm 上传中 标签: jquery ajax 上传 进度条话题: Web开发 前端技术 jquery ajax实现上传文件代码,带进度条

Ext.Net 控件FileUploadField上传文件

Ext.Net 控件FileUploadField上传文件提示TypeError: parsedResponse.result is undefined 原因:提交会导致Request Headers改变,Accept属性,表示不接收application/json的数据,这个会在Chrome上执行但是会出提示,在FireFox上根本执行不了,并且报TypeError:result is undefined错误错误写法:返回方法(return this.redirect()) 正确方法:   

Drupal创建自定义表单,上传文件代码

Drupal中创建自定义表单,用来上传文件,对上传文件做一些操作.以下是放在Module中的代码: 一.菜单建立表单路径 /** Implementation of hook_menu(). */ function moduleName_menu () { $items = array(); $items['admin/import'] = array( 'title' => 'title', 'page callback' => 'drupal_get_form', 'page argume

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

表单: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> </head> <body> <form action="upload.php" method="post" enctype=

上传文件代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

javaWeb上传文件代码

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

easyui 上传文件代码

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.IO;using BLL;using m = Model;using System.Data;using System.Data.SqlClient;using System.Text;namespace Web.Handler{ /// <summary> /// AddOppportunityHandle

socket 上传文件代码

server.py #!/usr/bin/env python# -*- coding:utf-8 -*- import socketimport os,hashlib ip_port = ('127.0.0.1',6969)sk = socket.socket()sk.bind(ip_port)sk.listen(5) while True: conn,address = sk.accept() while True: print('等待新指令') #获取客户端发来的操作指令 data = c

jsp 上传文件代码