ExtJS 6 - Wie lade ich eine Datei ohne Formular hoch?

Question

Ext JS bietet fileuploadfield, die mit einer Schaltfläche zum Durchsuchen lokaler Dateien gebündelt ist. Ich muss nur eine Datei hochladen, sobald sie von lokal ausgewählt wird, anstatt eine Übergabeschaltfläche zu verwenden, um den Postprozess auszulösen. Es konnte kein Ereignis gefunden werden, das ausgelöst wird, nachdem die Datei ausgewählt wurde.

p.s. Die Version, die ich verwende, ist Ext JS 6, aber ich denke, dass die Lösungen, die auf vorherigen Versionen basieren, die Arbeit auch machen.

Answer 1

Sie müssen ein Formular verwenden, wenn Sie die Datei einreichen möchten. Selbst wenn Sie möchten, dass sich die Schaltfläche in einer Werkzeugleiste befindet, können Sie sie in ein Formular einschließen und sie wird weiterhin wie eine normale Symbolleistenschaltfläche aussehen (Sie müssen dafür die richtige ui-Konfiguration angeben).

Beispiel:

dockedItems: [{ 
    dock: 'top', 
    xtype: 'toolbar', 
    items: [{ 
     xtype: 'form', 
     padding: '10 0 0', 
     url: 'submit/image', 
     items: { 
      xtype: 'filefield', 
      buttonOnly: true, 
      width: 100, 
      buttonConfig: { 
       text: 'Add logo', 
       width: '100%', 
       ui: 'default-toolbar-small' 
      }, 
      listeners: { 
       change: function (filefield) { 
        filefield.up('form').submit(); 
       } 
      } 
     } 
    }, { 
     text: 'Remove logo' 
    }, '-', { 
     text: 'Discard changes' 
    }] 
}] 

Arbeiten Geige Beispiel: https://fiddle.sencha.com/#view/editor&fiddle/1pdk

Answer 2

Sie suchen nach dem Ereignis change auf dem Fileuploadfield.

Der Code könnte wie folgt aussehen:

Ext.create('Ext.form.Panel', { 
    renderTo: Ext.getBody(), 
    title: 'Upload Panel', 
    items: [{ 
     xtype: 'filefield', 
     name: 'photo', 
     fieldLabel: 'Photo', 
     labelWidth: 50, 
     msgTarget: 'side', 
     allowBlank: false, 
     anchor: '100%', 
     buttonText: 'Select Photo...', 
     listeners: { 
      change: function (me, value, eOpts) { 
       console.log('trigger upload of file:', value); 
      } 
     } 
    }], 
}); 

Fiddle https://fiddle.sencha.com/#view/editor&fiddle/1pd2

Answer 3

Während ich mit scebotari's answer darüber einig, dass in Ihrem Fall ein Formular in der Symbolleiste Einbettung ist wahrscheinlich die einfachste Lösung, im Interesse der ursprünglichen Beantwortung Frage:

Wenn Sie wirklich ein Formular nicht verwenden können oder wollen und Sie bezüglich der Browserunterstützung nicht beschränkt sind, schauen Sie sich die FileReader an.

Die Idee ist, den Dateiinhalt auf der Client-Seite (JavaScript) zu lesen und dann die Daten mit einer regulären AJAX-Anfrage zu senden.

Ihr Code könnte so aussehen:

function (fileField) { 
    var file = fileField.fileInputEl.dom.files[0], 
     reader; 

    if (file === undefined || !(file instanceof File)) { 
     return; 
    } 

    reader = new FileReader();  
    reader.onloadend = function (event) { 
     var binaryString = '', 
      bytes = new Uint8Array(event.target.result), 
      length = bytes.byteLength, 
      i, 
      base64String; 

     // convert to binary string 
     for (i = 0; i < length; i++) { 
      binaryString += String.fromCharCode(bytes[i]); 
     } 

     // convert to base64 
     base64String = btoa(binaryString); 

     Ext.Ajax.request({ 
      url: 'save-file.php', 
      method: 'POST', 
      params: { 
       data: base64String 
      } 
     }); 
    }; 

    reader.readAsArrayBuffer(file); 
} 

Answer 4

Formular ist nicht erforderlich. Sie können AJAX und FormData 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){ } 
}); 

Online-Demo here