Компонент Загрузка файлов : Upload

Загружайте файлы через элемент формы ввода файла или область заполнителя.

Upload. Руководство по использованию

Этот компонент JavaScript использует новейшую спецификацию XMLHttpRequest уровня 2 и предоставляет возможность загрузки файлов через Ajax, включая отслеживание хода загрузки. Компонент предоставляет два способа загрузки файлов: select и drop. В то время как запрос select может быть применен только к элементам <input type="file">, вы можете спокойно использовать любой элемент с drop, что позволяет просто перетаскивать файлы со своего рабочего стола в указанный элемент для их загрузки.

Обратите внимание, что этот компонент не обрабатывает загрузку файлов на сервер.


Выбрать файл

В этом примере используется простая кнопка, которая открывает окно выбора файла.

  • <div class="js-upload" uk-form-custom>
        <input type="file" multiple>
        <button class="uk-button uk-button-default" type="button" tabindex="-1">Выбрать</button>
    </div>

Область перетаскивания : Drop area

В этом примере показано, как реализовать область перетаскивания с возможностью выбора файла в файловом окне.

  • Перетащите файлы опустив их здесь или
    выберите один
  • <div class="js-upload uk-placeholder uk-text-center">
        <span uk-icon="icon: cloud-upload"></span>
        <span class="uk-text-middle">Перетащите файлы опустив их здесь или</span>
        <div uk-form-custom>
            <input type="file" multiple>
            <span class="uk-link">выберите один</span>
        </div>
    </div>
    <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
    
            var bar = document.getElementById("js-progressbar");
    
            UIkit.upload(".js-upload", {
    
                url: "",
                multiple: true,
    
                beforeSend: function () {
                    console.log("beforeSend", arguments);
                },
                beforeAll: function () {
                    console.log("beforeAll", arguments);
                },
                load: function () {
                    console.log("load", arguments);
                },
                error: function () {
                    console.log("error", arguments);
                },
                complete: function () {
                    console.log("complete", arguments);
                },
    
                loadStart: function (e) {
                    console.log("loadStart", arguments);
    
                    bar.removeAttribute("hidden");
                    bar.max = e.total;
                    bar.value = e.loaded;
                },
    
                progress: function (e) {
                    console.log("progress", arguments);
    
                    bar.max = e.total;
                    bar.value = e.loaded;
                },
    
                loadEnd: function (e) {
                    console.log("loadEnd", arguments);
    
                    bar.max = e.total;
                    bar.value = e.loaded;
                },
    
                completeAll: function () {
                    console.log("completeAll", arguments);
    
                    setTimeout(function () {
                        bar.setAttribute("hidden", "hidden");
                    }, 1000);
    
                    alert("Загрузка завершена!");
                }
    
            });
            
        });
    </script>

JavaScript

To create select and drop upload listeners, you need to instantiate each upload class with the target element and options, which define callbacks and useful settings.

<script>

    var bar = document.getElementById('js-progressbar');

    UIkit.upload('.js-upload', {

        url: '',
        multiple: true,

        beforeSend: function (environment) {
            console.log('beforeSend', arguments);

            // The environment object can still be modified here. 
            // var {data, method, headers, xhr, responseType} = environment;

        },
        beforeAll: function () {
            console.log('beforeAll', arguments);
        },
        load: function () {
            console.log('load', arguments);
        },
        error: function () {
            console.log('error', arguments);
        },
        complete: function () {
            console.log('complete', arguments);
        },

        loadStart: function (e) {
            console.log('loadStart', arguments);

            bar.removeAttribute('hidden');
            bar.max = e.total;
            bar.value = e.loaded;
        },

        progress: function (e) {
            console.log('progress', arguments);

            bar.max = e.total;
            bar.value = e.loaded;
        },

        loadEnd: function (e) {
            console.log('loadEnd', arguments);

            bar.max = e.total;
            bar.value = e.loaded;
        },

        completeAll: function () {
            console.log('completeAll', arguments);

            setTimeout(function () {
                bar.setAttribute('hidden', 'hidden');
            }, 1000);

            alert('Загрузка завершена!');
        }

    });

</script>

Опции компонента

При использовании компонента Upload к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция Значение По умолчанию Описание
url String '' URL запроса.
multiple Boolean false Разрешить загрузку нескольких файлов.
name String files[] Имя параметра.
type String POST Тип запроса.
params Object {} Дополнительные параметры
allow String false File name filter. (eg. *.png)
mime String false File MIME type filter. (eg. image/*)
concurrent Number 1 Количество файлов, которые будут загружены одновременно.
type String `` Ожидаемый тип ответа
method String POST Метод запроса
msg-invalid-mime String Invalid File Type: %s Invalid MIME type message.
msg-invalid-name String Invalid File Name: %s Invalid name message.
cls-dragover String uk-dragover File name filter.
abort Function null The abort callback.
before-all Function null The beforeAll callback.
before-send Function null The beforeSend callback.
complete Function null The complete callback.
complete-all Function null The completeAll callback.
error Function null The error callback.
load Function null The load callback.
load-end Function null The loadEnd callback.
load-start Function null The loadStart callback.
progress Function null The progress callback.
fail Function alert The fail callback. If name or MIME type are invalid.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.upload(element, options);

События

Следующие события будут инициированы для элементов компонента «Upload»:

Название Описание
upload Запускается до загрузки файлов.
Документация
Компоненты