Настройка Uploader

Загрузка без множественного выбора

Кнопка загрузчика вызывает окно для выбора и загрузки файлов с вашего устройства. По умолчанию Uploader поддерживает загрузку сразу нескольких фалов.

Если для свойства multiple установить значение false, Uploader позволит выбирать для загрузки только один файл. Последующая загрузка приведет к замене предыдущего файла.

webix.ui({ 
    view:"uploader",
    multiple:false
});

Related sample: Single Upload

Ручная отправка

Добавляемые в Uploader файлы сразу же обрабатываются специальным скриптом. Чтобы изменить установленное по умолчанию поведение, выключите настройку autosend:

webix.ui({ 
    rows: [
        { 
          view:"uploader",
          autosend:false
        },
        { 
            view:"button", 
            click:function(){
                $$('uploader_1').send();
            }
        }
    ]
});

Файлы будут посланы только после вызова функции send(), которая спровоцирует выполнение скрипта.

Преимущества ручной отправки:

вы можете визуализировать ответ загрузочного скрипта на стороне клиента;
вы можете включить последовательное сохранение данных uploader и form (если кроме загрузчика форма содержит другие поля).

Задание дополнительных данных для отправки

Данные формы

Помимо данных файла в теле POST запроса, Uploader позволяет задавать дополнительные данные для отправки на сервер.

Для этих целей подходит параметр formData.

webix.ui({ 
    view:"uploader",
    formData:{
        param1:value1,
        param2:value2
    }
});

Код выше позволяет отправлять одинаковые параметры для каждого файла загружаемого с помощью этого загрузчика.

Если вам нужно отправить конкретные дополнительные параметры для каждого файла, добавьте свойство formData к нужным элементам файла перед отправкой (например, когда autosend отключен):

webix.ui({      
  view:"form", rows: [
    { 
      view: "uploader", id:"upl1",
      autosend:false,
      formData:{
        // добавляет параметры всем файлам
        param1:value1
      } 
    },
    { view: "button", label: "Save files", click: function() {
      $$("upl1").files.data.each(function(obj){
        // добавляет конкретному файлу специфические параметры
        obj.formData = { param2:value2};
        // отправляет этот файл
        $$("upl1").send(id);
      });
      // или отправляет все файлы после цикла
      $$("upl1").send();
    }}
  ]
});

Данные URL

Чтобы послать дополнительные данные вместе с данными файла в строке POST запроса, используйте параметр urlData:

webix.ui({ 
    view:"uploader",
    urlData:{
        param1:value1
    }
});

Загрузка определенных типов данных

Вы можете настроить Uploader на загрузку только определенных типов данных. Доступные для загрузки типы указываются в свойстве accept:

webix.ui({
    maxWidth:800,
    cols:[{
        view:"form", rows: [
            { 
                view: "uploader", value: "Upload Images", 
                name:"files", accept:"image/png, image/gif, image/jpeg",
                link:"mylist",  upload:"php/upload.php" 
            }       
        ]
    }]
});

В примере выше Uploader позволяет загружать только изображения (форматы .png, .gif и .jpg). Полный список MIME-типов вы можете найти тут.

Загрузка папок

Uploader также позволяет загружать папки с их содержимым. Вы можете как выделить нужную папку, так и перетянуть ее.

По умолчанию, диалоговое окно загрузчика предлагает список файлов. Чтобы диалоговое окно Uploader предоставляло список директорий, задайте свойству directory значение true.

webix.ui({
    view:"form", rows: [
        { 
            view: "uploader", value: "Upload", 
            name:"files",
            directory: true,
            autosend: true,
            link:"mylist",  upload:"php/upload.php" 
        }       
    ]
});

Related sample: Directory Upload

Статьи по теме

Наверх