zoukankan      html  css  js  c++  java
  • Ext.js弹窗上传文件

    1.构建上传组件

    var fileUpload = new Ext.FormPanel({
            id:'fileUpload',
            frame:true,
            fileUpload:true,
            items:[{
                        xtype: 'filefield',
                        fieldLabel: '选择文件',
                        labelWidth: 80,
                        msgTarget: 'side',
                        allowBlank: false,
                        margin: '10,10,10,10',
                        anchor: '100%',
                        buttonText:'选择文件'
                    }
              ],
              buttonAlign:'center',
              buttons:[{
                      text:'导入',
                    handler:function(){
                            if(fileUpload.form.isValid()){
                                
                                fileUpload.form.submit({
                                    method:'post',
                                    url:'/import',//根据自己系统的需要调用程序处理上传文件
                                    params: {
                                        action: 'UploadFile'
                                    },
                                    success: function(form, action) {
                                       var jsonResult = Ext.JSON.decode(action.response.responseText);
                                       if (jsonResult.success) {
                                         winFielUpload.hide();
                                       }
                                        Ext.Msg.alert('提示', jsonResult.msg);
                                    },
                                    failure: function() {
                                        Ext.Msg.alert("系统提示", "文件上传失败!");
                                    }
                                });
    
                            }else{
                                Ext.Msg.alert("系统提示","请选择文件后再上传!");
                            }
                        }
                    },{
                        text:'取消',
                        handler:function(){
                            winFielUpload.hide();
                        }
                    }
             ]
        });

    2.构建弹窗,将上传组件引入

    var winFielUpload=new Ext.Window({
            id:'win',
            title:'导入数据',
            //****renderTo:'divWindow',//对于window不要使用renderTo属性,只需要调用show方法就可以显示,添加此属性会难以控制其位置
            500,
            closeAction:'hide',//close缺省的动作是从DOM树中移除window并彻底加以销毁, hide隐藏
            height:200,
            layout:'fit',
            autoDestory:true,
            modal:true,
            closeAction:'hide',
            items:[
                fileUpload
            ]
        }).show();

    3.java后端接受并返回结果

      //Controller
      @RequestMapping(value = "/import")
      @ResponseBody
      public void import(HttpServletRequest request,HttpServletResponse response){
          try {
             ydlptjService.import(request,response);
      }
    catch (Exception e) {    e.printStackTrace();    } }   //ServiceImpl   @Override public void importRyzrz(HttpServletRequest request, HttpServletResponse response) throws Exception { MultiValueMap<String, MultipartFile> multiFileMap = ((MultipartHttpServletRequest) request).getMultiFileMap(); Set<String> strings = multiFileMap.keySet(); for (String key:strings) { List<MultipartFile> multipartFiles = multiFileMap.get(key); for (MultipartFile file:multipartFiles) { //处理MultipartFile代码 } } log.info("导入执行完毕"); JSONObject jo=new JSONObject(); jo.put("success",true); jo.put("errlist",errlist); jo.put("msg","导入成功"); //将结果写出去,格式必须是json 必须要有 success:true 不然不会进入成功的回调函数内 response.getWriter().print(jo); }
  • 相关阅读:
    记录一次对接XX支付SDK过程中报错问题
    接口回调(重点是理解)
    jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象
    如何通过submit提交form表单获取后台传来的返回值
    Unsupported major.minor version 52.0
    js获取input file路径改变图像地址
    html 横线的代码
    FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换
    UUID不失精度,长度改进
    java Date时间的各种转换方式和Mysql存时间类型字段的分析
  • 原文地址:https://www.cnblogs.com/HQ0422/p/15143673.html
Copyright © 2011-2022 走看看