1

我有包含文件上传项目的 ext 表单面板。代码如下所示：

fp = new Ext.FormPanel({
         fileUpload: true,
         autoHeight: true,
         bodyStyle: 'padding: 10px 10px 0 10px;',
         labelWidth: 50,
         defaults: {
             anchor: '95%',
             allowBlank: false,
             msgTarget: 'side'
         },
         items: [
            {
                xtype: 'fileuploadfield',
                id: 'form-file',
                emptyText: 'Select excel file',
                fieldLabel: 'File',
                name: 'file',
                buttonText: 'Choose File',
                buttonCfg: {
                    iconCls: 'upload-icon'
                }
            }
         ],
         buttons: [{
            text: 'Load',
             handler: function(){                   
                if(fp.getForm().isValid()){
                  fp.getForm().submit({
                      url: myURL,
                      waitMsg: 'Uploading your photo...',
                      success: function(fp, o){
                        // I want to get loaded excel data list
                      },
                      failure : function(fp,o)
                      {
                        console.log('error');
                      }
                  });
                 }
             }
         }]
     });

我有弹簧控制器和一些用于处理上传的 Excel 数据的服务。上传excel后，我在excel上迭代数据并将它们放在一个列表中。

@RequestMapping("/uploadExcel")
@ResponseBody
public Map<String, ? extends Object> uploadExcellData(@RequestParam("file") MultipartFile file)
{
    Map<String, Object> result = new HashMap<String,Object>();
    try
    {
        result = uploadService(file);
    }
    catch(Exception ex)
    {
        logger.error(ex.getMessage(), ex);
    }

    return result;
}

public Map<String,Object> uploadService(MultipartFile argFile) throws BLOException, DAOException 
{
    Map<String,Object> result = new HashMap<String,Object>(3);

    List importExcelList = null;
    try 
    {
        if (!argFile.isEmpty()) 
        {   
            importExcelList = parseExcelAndCreateListFunction(argFile.getInputStream());

            result.put("total", new Integer(importExcelList.size()));
            result.put("success", true);

            result.put("data", importExcelList);
        }
    } 
    catch (IOException e) 
    {
        logger.error(e.getMessage(), e);
    }

    return result;
}

当我运行这段代码时，我得到了“ NetworkError: 404 Not Found”。我想在表单提交后返回 excel 数据列表。我不能这样做。如何在提交回调时获取 excel 数据列表？

4

2 回答 2

0

我想您需要返回附加参数并签入success方法action参数。请检查Extjs 文档 (action.result)。

于 2013-03-18T19:08:58.063 回答
0

我已经更新了这样的java文件：

@RequestMapping("/uploadExcel")
@ResponseBody
public void uploadExcellData(@RequestParam("file") MultipartFile file, HttpServletResponse response)
{
    Map<String, Object> result = new HashMap<String,Object>();
    try
    {
        result = uploadService(file);
    }
    catch(Exception ex)
    {
        logger.error(ex.getMessage(), ex);
    }

    response.setContentType("text/html; charset=UTF-8");
    response.getWriter().write("{success:true, total:'"+result.size()+"', data:'"+result+"'}");

}

public List uploadService(MultipartFile argFile) throws BLOException, DAOException 
{
    List importExcelList = null;
    try 
    {
        if (!argFile.isEmpty()) 
        {   
            importExcelList = parseExcelAndCreateListFunction(argFile.getInputStream());
        }
    } 
    catch (IOException e) 
    {
        logger.error(e.getMessage(), e);
    }

    return importExcelList;
}

而且我还更新了我的 js 文件，如下所示：

fp = new Ext.FormPanel({
   fileUpload: true,
   autoHeight: true,
   bodyStyle: 'padding: 10px 10px 0 10px;',
   labelWidth: 50,
   defaults: {
       anchor: '95%',
       allowBlank: false,
       msgTarget: 'side'
   },
   items: [
      {
          xtype: 'fileuploadfield',
          id: 'form-file',
          emptyText: 'Select excel file',
          fieldLabel: 'File',
          name: 'file',
          buttonText: 'Choose File',
          buttonCfg: {
              iconCls: 'upload-icon'
          }
      }
   ],
   buttons: [{
      text: 'Load',
       handler: function(){                   
          if(fp.getForm().isValid()){
            fp.getForm().submit({
                url: myURL,
                waitMsg: 'Uploading your photo...',
                success: function(fp, o){
                    var resData = Ext.util.JSON.decode(o.result.data);
                    // I can iterate resData
                },
                failure : function(fp,o)
                {
                    Ext.MessageBox.alert("Failure", "your error message");
                }
            });
           }
       }
   }]
});

如上所述，我解决了我的问题。

于 2013-04-10T19:18:20.013 回答