Przesyłanie plików w extjs 4.2 bez form.submit()

Question

Próbuję przesłać plik (od teraz dowolnego rozszerzenia) w extjs. Mam model i sklep. przesyłanie plików odbywa się z poziomu okna i nie mam formularza w oknie. Wszystkie przykłady, które wypróbowałem w sieci są w form.submit(). Zamiast tego używam połączenia Ajax i jak poniżej, aby wysłać dane do serwera.

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

Dane do wysłania danych są przedstawione poniżej.

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

Podczas ustawiania rekord w modelu używam poniższy kod ..

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

Otrzymałem błąd 500 stanu z odpowiedzią "Cannot convert value of type [java.lang.String] to required type [org.springframework.web.multipart.commons.CommonsMultipartFile]"

Jestem pewien, że jest to ze względu na sposób, w jaki ustawiam wartość dla modelu, gdy Ext.getCmp('fileUploadCompID').value podaje nazwę pliku. Proszę dać mi znać, jak ustawić plik do modelu i jaki typ danych muszę określić dla pola w modelu.

Poniżej znajduje się sposób, w jaki próbuję pobrać plik w kontrolerze sprężyn.

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

Proszę dać mi znać, co robię źle i co należy zrobić, aby rozwiązać ten problem ...

Answer 1

Nie można zrobić z FileField z ExtJS

FileField z ExtJS zwróć tekstowy ciąg znaków z wybranego pliku.

myślę, że trzeba ten plik wybrany jako występuje w przypadku zmian, ale nie ma tego FileField wydarzenie

można korzystać z tego rozwiązania, może dostać jeden pomysł z roztworu

Przykład: 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

Jeśli chcesz nadal używać ExtJS na fileuploadfield i przesłać za pośrednictwem wywołania AJAX przy użyciu HTML5 FileReader, można zrobić takie jak:

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 wersja 6.0.1 - Korzystanie 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

Tak, można użyć Ajax i 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){ 
    } 
}); 

Zobacz moje demo here