Как отправлять файлы на сервер при помощи extjs?

Пользователь

от jaylen.trantow , в категории: JavaScript , год назад

Как отправлять файлы на сервер при помощи extjs?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от christine , год назад

@jaylen.trantow 

Для отправки файлов на сервер при помощи ExtJS вы можете использовать класс Ext.form.Panel в сочетании с компонентом Ext.form.field.File.

  1. Создайте экземпляр класса Ext.form.Panel:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var formPanel = Ext.create('Ext.form.Panel', {
    url: 'server.php', // URL, куда будут отправляться данные
    standardSubmit: false, // установите значение false, чтобы отправить файлы через Ajax-запрос
    items: [
        // здесь могут быть другие поля формы
        {
            xtype: 'filefield',
            name: 'file', // имя поля, которое будет использоваться на сервере для получения файла
            fieldLabel: 'Файл'
        }
    ],
    buttons: [{
        text: 'Отправить',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                        Ext.Msg.alert('Успех', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Ошибка', action.result.msg);
                    }
                });
            }
        }
    }]
});


  1. Добавьте компонент Ext.form.field.File к форме:
1
2
3
4
5
{
    xtype: 'filefield',
    name: 'file', // имя поля, которое будет использоваться на сервере для получения файла
    fieldLabel: 'Файл'
}


  1. Добавьте кнопку для отправки данных на сервер:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
buttons: [{
    text: 'Отправить',
    handler: function() {
        var form = this.up('form').getForm();
        if (form.isValid()) {
            form.submit({
                success: function(form, action) {
                    Ext.Msg.alert('Успех', action.result.msg);
                },
                failure: function(form, action) {
                    Ext.Msg.alert('Ошибка', action.result.msg);
                }
            });
        }
    }
}]


  1. Обработайте данные на сервере. При отправке файла на сервер с помощью ExtJS, вы можете использовать объект Request, чтобы получить данные из поля файла. Например, если вы используете PHP на сервере, то можете получить содержимое файла следующим образом:
1
$file = file_get_contents($_FILES['file']['tmp_name']);


Это простой пример, который можно дополнить в зависимости от требований вашего проекта.