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

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

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>

Параметры компонента

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

Опция Значение По умолчанию Описание
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 Запускается до загрузки файлов.
Документация
Компоненты