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

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

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 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`	Фильтр имен файлов. (например, *.png)
`mime`	String	`false`	Фильтр MIME-типа файла. (например, image/*)
`concurrent`	Number	`1`	Количество файлов, которые будут загружены одновременно.
`type`	String		Ожидаемый тип данных ответа (xml, json, script или html).
`method`	String	`POST`	Метод запроса
`msg-invalid-mime`	String	`Invalid File Type: %s`	Неверный тип MIME сообщения.
`msg-invalid-name`	String	`Invalid File Name: %s`	Сообщение о неверном имени.
`cls-dragover`	String	`uk-dragover`	Фильтр имен файлов.
`abort`	Function		Обратный вызов abort.
`before-all`	Function		Обратный вызов beforeAll.
`before-send`	Function		Обратный вызов beforeSend.
`complete`	Function		Обратный вызов complete.
`complete-all`	Function		Обратный вызов completeAll.
`error`	Function		Обратный вызов error.
`load`	Function		Обратный вызов load.
`load-end`	Function		Обратный вызов loadEnd.
`load-start`	Function		Обратный вызов loadStart.
`progress`	Function		Обратный вызов progress.
`fail`	Function		Обратный вызов fail. Если имя или тип MIME недействительны.

JavaScript

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

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

UIkit.upload(element, options);

События

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

Имя события	Описание
`upload`	Запускается до загрузки файлов.