在不带form.submit()的extjs 4.2中上传文件 [英] File upload in extjs 4.2 without form.submit()

问题描述

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

I'm trying to upload a file (as of now of any extension) in extjs. I have a model and store. the file upload happens from a window and I dont have a form in the window. All example I tried in the net are with form.submit(). I instead use and Ajax call as below to send the data to the server.

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

要发送的数据记录如下.

The records to send in the data is got as below.

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

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

While setting the record in the model, I use the below code..

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

我收到响应为"Cannot convert value of type [java.lang.String] to required type [org.springframework.web.multipart.commons.CommonsMultipartFile]"

我确定这是因为我将值设置为模型的方式，因为Ext.getCmp('fileUploadCompID').value给出了文件名.请让我知道如何将文件设置为模型，以及必须为模型中的字段指定哪种数据类型.

I'm sure that this is because of the way I set the value to the model as Ext.getCmp('fileUploadCompID').value gives the file name. Please let me know how to set the file to the model and what data type I have to specify for the field in the model.

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

Below is how I try to retrieve the file in the spring controller.

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

请让我知道我在做错什么，以及必须采取哪些措施来解决此问题...

Please let me know what I'm doing wrong and what has to be done to fix this...

推荐答案

您无法使用Extjs的文件字段

You can't do it with filefield of Extjs

Extjs的文件字段从选择文件返回字符串URL.

filefield of Extjs return string url from select file.

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

I think you need the file selected as occurs in change event but filefield haven't this event

您可以使用此解决方案， 也许您从解决方案中得到一个主意

you can use this solution, maybe you get one idea from the solution

示例: 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);
}

这篇关于在不带form.submit()的extjs 4.2中上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！