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的fileuploadfield并使用HTML5 FileReader通过AJAX调用上传，您可以这样做：

launchUpload: function () {
    //get a handle of the "file" input in the widget itself...
    var fileInput = document.getElementById(yourUploadField.button.fileInputEl.id);
    var fileReader = New FileReader();
    var fileToUpload = fileInput.files[0]; //assuming your only uploading one file...
    var me = this

    fileReader.onload = function (e) {
         me.onLoadFile(e, me, fileToUpload.name);
    }

    fileReader.readAsDataURL(fileToUpload);

}, 
onLoadFile: function (e, scope, filename) {

     //I carry the scope around for functionality...

     Ext.Ajax.request({
        method: 'POST',
        url: 'url',
        scope: scope,
        jsonData: { fileNameParameter: filename, fileDatainBase64: e.target.result},
        success: function (response, operation) {
            //success..
        },
        failure: function (response, operation) {
            //failure...
        }
    });       

}

Answer 2

你无法使用Extjs的文件字段

Extjs的文件字段从select文件中返回字符串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);
}

Answer 3

ExtJs版本6.0.1 - 使用iframe

Ext.define('xxx.yyy.UploadData', {
    extend : 'Ext.form.Panel',
    alias  : 'widget.uploaddata',

    initComponent : function(){        
        var me = this;        

        me.items = [{
          xtype      : 'filefield',
          margin     : '20 0 0 20',
          name       : 'excelfile',
          fieldLabel : 'Choose file',
          msgTarget  : 'side',
          allowBlank : false,
          anchor     : '30%',
          buttonText : 'Select',
          defaultButtonTarget : 'fileframe'
        },{
          xtype : 'panel',
          html  : '<iframe width="340" height="340" style="display: none" name="fileframe"></iframe>'
        },{
          xtype : 'button',
          text  : 'Import',
          handler : function(){
            var form = this.up('form').getForm();
            if(form.isValid()){
                form.submit({
                    url     : './upload.php',
                    waitMsg : 'uploading...',
                    success : function(fp, o) {
                        alert("OK");                            
                    }
                });
            }
        }
    }];

    me.callParent();        
    }    
   });

Answer 4

是的，您可以使用Ajax和FormData API：

var file = s.fileInputEl.dom.files[0],
     data = new FormData();
data.append('file', file);
Ext.Ajax.request({
   url: '/upload/files',
   rawData: data,
   headers: {'Content-Type':null}, //to use content type of FormData
   success: function(response){
   }
});

查看我的演示here

在没有form.submit（）的extjs 4.2中上传文件

4 个答案: