Документация UIkit 3 на русском

Главная
Загрузка

Загружайте файлы через элементы input или placeholder area.

Использование

Этот компонент 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">Select</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>

    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

Для создания элемента select и drop и прослушивания загрузки, вам нужно создать экземпляр каждого класса загрузки с целевым элементом и параметрами, которые определяют Callback и полезные настройки.

<script>

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

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

        url: '',
        multiple: true,

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

            // Объект все еще может быть изменен здесь. 
            // 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>

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

Любая из перечисленных оптция применима к атрибуту компонента. Отделяйте опции друг от друга точкой с запятой. Подробнее

Опция	Значение	По умолчанию	Описание
`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	``	Тип ответа Все о типах ответа
`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	`null`	Отменить обратный вызов функции.
`before-all`	Function	`null`	Вызов перед загрузкой.
`before-send`	Function	`null`	Вызов перед отправкой.
`complete`	Function	`null`	Успешное завершение вызова.
`complete-all`	Function	`null`	Успешное завершение.
`error`	Function	`null`	Ошибка вызова.
`load`	Function	`null`	Вызов загрузки.
`load-end`	Function	`null`	Завершение вызова загрузки.
`load-start`	Function	`null`	Начало загрузки.
`progress`	Function	`null`	Процесс загрузки.
`fail`	Function	`alert`	Вызов не удался, если имя файла или MIME-тип не корректны.

JavaScript

Все о компонентах JavaScript.

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

UIkit.upload(element, options);

События

Для компонента доступны следующие события:

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

Документация

Загрузка

Уважаемые пользователи!