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

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

Руководство

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

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

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

Select

Выбрать файл

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

  • <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

Область перетаскивания :: 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);

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

        });
        
    });
</script>
Upload listeners

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 Запускается до загрузки файлов.
Upload