Загрузка

Загружайте файлы через элементы 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 Срабатывает до загрузки файлов