ExtJS 6 - Как загрузить файл без использования формы?

Question

Ext JS предоставляет fileuploadfield, который поставляется с кнопкой для просмотра локальных файлов. Мне просто нужно загрузить файл, как только он будет выбран из локального, вместо того, чтобы использовать кнопку отправки, чтобы запустить почтовый процесс. Не удалось найти событие, которое будет запущено после выбора файла.

p.s. Фактически, используемая версия Ext JS 6, но я думаю, что решения, основанные на предыдущих версиях, также работают.

Answer 1

Вам нужно будет использовать форму, если вы хотите отправить файл. Даже если вы хотите, чтобы кнопка находилась на панели инструментов, вы можете заключить ее в форму, и она по-прежнему будет выглядеть как обычная кнопка на панели инструментов (для этого вам нужно указать правильную конфигурацию ui).

Пример:

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' 
    }] 
}] 

Работа скрипка пример: https://fiddle.sencha.com/#view/editor&fiddle/1pdk

Answer 2

Вы ищете событие change на fileuploadfield.

Код может выглядеть следующим образом:

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

Хотя я согласен с scebotari's answer, что в вашем случае вложения формы в панели инструментов, вероятно, является самым простым решением, ради ответа на оригинале вопрос:

Если вы действительно не можете или не хотите использовать форму, и вы не ограничены в отношении поддержки браузеров, посмотрите на FileReader.

Идея состоит в том, чтобы прочитать содержимое файла на стороне клиента (JavaScript), а затем отправить данные с использованием обычного запроса AJAX.

Ваш код может выглядеть так:

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

форма не требуется. Вы можете использовать AJAX и FormData.

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