• 周五. 10月 7th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

Ext.js弹窗上传文件

admin

11月 28, 2021

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); }

发表回复

您的电子邮箱地址不会被公开。