Datei-Upload in Extjs 4.2 ohne form.submit()

Question

Ich versuche, eine Datei (ab sofort von jeder Erweiterung) in extjs hochzuladen. Ich habe ein Modell und ein Geschäft. Der Datei-Upload erfolgt über ein Fenster und ich habe kein Formular im Fenster. Alle Beispiele, die ich im Netz versucht habe, sind mit form.submit(). Ich benutze stattdessen und Ajax Anruf wie unten, um die Daten an den Server zu senden.

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

Die Datensätze zum Senden der Daten wird wie folgt erhalten.

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

Während der Aufzeichnung im Modell Einstellung, ich den Code unten verwenden ..

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

erhielt ich einen 500 Statusfehler mit der Antwort "Cannot convert value of type [java.lang.String] to required type [org.springframework.web.multipart.commons.CommonsMultipartFile]"

ich bin sicher, dass dies wegen der Art, wie ich den Wert auf das Modell als Ext.getCmp('fileUploadCompID').value gibt den Dateinamen. Lassen Sie mich wissen, wie Sie die Datei für das Modell festlegen und welchen Datentyp ich für das Feld im Modell angeben muss.

Unten ist, wie ich versuche, die Datei in der Federsteuerung abzurufen.

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

Bitte lassen Sie mich wissen, was ich falsch mache und was getan werden muss, um dieses Problem beheben ...

Answer 1

Sie können es nicht mit Filefield von ExtJS

Filefield von ExtJS Gibt die String-URL von der ausgewählten Datei zurück.

Ich glaube, Sie brauchen die ausgewählte Datei als in Änderungsereignis auftritt, aber haben nicht Filefield diese Veranstaltung

Sie diese Lösung verwenden können, vielleicht haben Sie eine Idee aus der Lösung erhalten

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

Wenn Sie noch wollen ExtJS gebrauchen fileuploadfield und laden über einen AJAX-Aufruf mit HTML5 FileReader, können Sie es wie so tun:

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 Version 6.0.1 - Mit 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

Ja, können Sie Ajax und Formdata API verwenden:

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

meine Demo here