Загрузка файла в extjs 4.2 без формы.submit()

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

Вы не можете сделать это с FileField из ExtJS

FileField из ExtJS return string url из выбранного файла.

Я думаю, что вам нужен файл, выбранный, как это происходит в случае изменения, но FileField не это событие

вы можете использовать это решение, может быть, вы получите одну идею из раствора

Пример: 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 2

Если вы хотите по-прежнему использовать ExtJS-х fileuploadfield и загрузить через вызов AJAX с помощью HTML5 FileReader, вы можете сделать это, как, например:

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