在没有form.submit()的extjs 4.2中上传文件

Question

我正试图在extjs中上传一个文件(截至目前的任何扩展名).我有一个模特和商店.文件上传发生在一个窗口,我没有在窗口中的表单.我在网上尝试的所有例子都是使用form.submit().我改为使用和Ajax调用如下所示将数据发送到服务器.

Ext.Ajax.request({

            url : 'qaf/saveSetupDetails.action',

            params : {
                'data' : recordsToSend
            },
            failure : function(response){
                //console.log('error connecting controller');
            },
            success : function(response){
                //console.log('successfully submitted');
            }
        });

要在数据中发送的记录如下所示.

var store = Ext.getStore('SomeStore');
        var modifiedRecords = store.getModifiedRecords();
        var recordsToSend = [];
        if(modifiedRecords.length > 0){
            Ext.each(modifiedRecords, function(record){
                recordsToSend.push(record.data);//I'm sure that this is so dump but this is how I do it for other records which are string and not sure how to do it for a file...
            });
        }
        Ext.USE_NATIVE_JSON = true;
        recordsToSend = Ext.encode(recordsToSend);

在模型中设置记录时,我使用下面的代码..

var rec = Ext.create('QAF.model.MyModel');
rec.set('modelField',Ext.getCmp('fileUploadCompID').value);

我收到了500响应状态错误 "Cannot convert value of type [java.lang.String] to required type [org.springframework.web.multipart.commons.CommonsMultipartFile]"

我确信这是因为我将模型的值设置为Ext.getCmp('fileUploadCompID').value文件名.请告诉我如何将文件设置为模型以及我必须为模型中的字段指定的数据类型.

下面是我尝试在弹簧控制器中检索文件的方法.

@RequestMapping (value = "/qaf/saveSetupDetails.action")
    public @ResponseBody
    void saveSetupDetails(@RequestParam CommonsMultipartFile data)throws Exception{
        log.info("Enter into saveSetupDetails method..." + data.getOriginalFilename());
    }

请让我知道我做错了什么以及要解决这个问题需要做些什么......

Answer 1

你不能用 Extjs 的文件字段来做到这一点

Extjs 的文件字段从选择的文件中返回字符串 url。

我认为您需要在更改事件中选择文件，但文件字段没有此事件

你可以使用这个解决方案，也许你会从该解决方案中得到一个想法

示例： http: //jsfiddle.net/e3M3e/e8V7g/

var itemFile = null;
Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 400,
    html: "<input id='inputFile' type='file' name='uploaded'/>",
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function() {
            itemFile = document.getElementById("inputFile");            
            itemFile.addEventListener('change', EventChange, false);
        }
   }
});

function EventChange(e){    
    var files = itemFile.files;
    console.log(files);
}