Загрузка файлов

• Использование
• JavaScript
• Параметры JavaScript

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

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

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

Компонент «Загрузчик» должен быть реализован индивидуально в соответствии с вашими требованиями. В данном примере используются Placeholder и компонент Form file обрабатывая оба drop и select запроса. Кроме того, используется компонент Progress, чтобы отобразить сам процесс загрузки.

Пример

<div id="upload-drop" class="uk-placeholder">
    Какой-то текст... <a class="uk-form-file">Выберите файл<input id="upload-select" type="file"></a>.
</div>

<div id="progressbar" class="uk-progress uk-hidden">
    <div class="uk-progress-bar" style="width: 0%;">0%</div>
</div>

JavaScript

To create select and drop upload listeners you need to instantiate each upload class with the target element and options, which defines callbacks and useful settings.

$(function(){

    var progressbar = $("#progressbar"),
        bar         = progressbar.find('.uk-progress-bar'),
        settings    = {

        action: '/', // upload url

        allow : '*.(jpg|jpeg|gif|png)', // allow only images

        loadstart: function() {
            bar.css("width", "0%").text("0%");
            progressbar.removeClass("uk-hidden");
        },

        progress: function(percent) {
            percent = Math.ceil(percent);
            bar.css("width", percent+"%").text(percent+"%");
        },

        allcomplete: function(response) {

            bar.css("width", "100%").text("100%");

            setTimeout(function(){
                progressbar.addClass("uk-hidden");
            }, 250);

            alert("Upload Completed")
        }
    };

    var select = UIkit.uploadSelect($("#upload-select"), settings),
        drop   = UIkit.uploadDrop($("#upload-drop"), settings);
});

Параметры JavaScript

Callback events