EXTJS 7.2 — Загрузка нескольких файлов с помощью Ext.field.Файл

#file-upload #extjs #extjs7

#загрузка файла #extjs #extjs7

Вопрос:

Я пытаюсь использовать поле 7.2.0 Modern File для загрузки нескольких файлов.

 var txtSiteCode = Ext.create('Ext.field.Text', {
        label: 'Site Code',
        required: true,
        name: 'site_code',
        responsiveConfig: {
            'width < 800': {
                labelAlign: 'top'
            },
            'width >= 800': {
                labelAlign: 'left'
            }
        }
                })
            }
        }
    }),  fldFile = Ext.create('Ext.field.File', {
        label: 'Images',
        name: 'files',
        multiple: true,
        accept: 'image',
        responsiveConfig: {
            'width < 800': {
                labelAlign: 'top'
            },
            'width >= 800': {
                labelAlign: 'left'
            }
        },
    }), form = Ext.create('Ext.form.Panel', {
        url: 'data/test.php',
        method: 'post',
        enctype: 'multipart/form-data',
        items : [txtSiteCode, fldFile],
    })
  

Когда форма отправлена, я получаю только 1 файл на сервере в массиве $_FILES. Однако, судя по размеру полезной нагрузки запроса, похоже, что на самом деле все файлы должны быть доступны.

 FILE COUNT: 1, referer:
[Thu Aug 20 09:05:09.715473 2020] [php7:notice] [pid 12749] Arrayn(n    [name] => FBK90084_Primary_14_PE4 (2).jpgn    [type] => image/jpegn    [tmp_name] => /tmp/phpxjd0pKn    [error] => 0n    [size] => 2973487n)n, 
  

Приведенное выше является подсчетом размера массива $ _FILE и дампом самого массива $_FILE. Это было результатом выбора 3 файлов jpg в средстве выбора файлов.

 Status200
OK
VersionHTTP/1.1
Transferred5.67 MB (0 B size)
Referrer Policyno-referrer-when-downgrade
  

Выше приведен ответ сервера, как вы можете видеть, его размер составляет 5,7 мб (в данном случае были выбраны файлы размером 2 ~ 3 мб).

Есть идеи, почему массив $ _FILES не показывает мне все отправленные файлы?

ОБНОВЛЕНИЕ: Кое-что на заметку — если я пойду и вручную установлю свойство name поля на отображаемой странице в devtools, чтобы оно включало ‘[]’ в конце, я могу получить несколько файлов для загрузки на сервер. Тогда проблема, по-видимому, заключается в том, что форма не обрабатывает ввод файла как многократную загрузку и использует правильное соглашение ‘name[]’, а EXT удаляет не буквенно-цифровые символы из строк имен, поэтому я, похоже, не могу установить для атрибута field name значение ‘files[]’ в коде. Я предполагаю, что, вероятно, смогу переопределить это? Просто не уверен, как

Комментарии:

1. Что ж, глупый способ исправить это — дождаться отображения панели, затем обновить имя элемента ввода файла, включив в него скобки var upload_el = document.getElementsByName(‘files’); if(upload_el){ upload_el[0].setAttribute(‘name’, ‘files[]’); }

2. Взгляните на метод ‘applyName’ для docs.sencha.com/extjs/7.0.0/modern/src/File.js.html

Ответ №1:

Если вы сомневаетесь в том, действительно ли файлы были отправлены в соответствии с вашими ожиданиями или нет, я предлагаю вам попытаться разделить проблемы, которые становятся двумя основными проблемами. Это проблема внешнего интерфейса (ext js) и серверной части (ваш PHP-скрипт при получении файлов). Я могу показать вам, как убедиться, что интерфейс (sencha ext js) действительно отправляет несколько файлов или нет, используя прослушиватель изменений внутри конфигурации filefield.

 Ext.create('Ext.field.File', {
        label: 'Images',
        name: 'files',
        multiple: true,
        accept: 'image',
        responsiveConfig: {
            'width < 800': {
                labelAlign: 'top'
            },
            'width >= 800': {
                labelAlign: 'left'
            }
        },
        listeners:{
           change: function(el,v){
              let files = el.getFiles(); //get all files
              files.forEach(file=>{
                 console.log(file); //check your console, you will be shown the object of a file
              });
           }
        }
    }
  

Другой способ проверить, отправляются ли файлы с несколькими параметрами ключевой формы как ‘name[]’ или только с одним параметром формы как ‘name’ (но содержит несколько файлов), просто проверьте сетевой инструмент в вашем браузере после отправки в серверную часть, он покажет вам ответ.