Загрузить

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

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

Этот JavaScript компонент использует новейшие объект xmlhttprequest уровень 2 спецификация и предоставляет возможность загрузки файлов через AJAX, в том числе отслеживание прогресса загрузки. Компонент предоставляет два способа загрузки файлов: select и drop. А select запрос может применяться только к <input type="file"> элементы, вы можете в принципе использовать любой элемент с drop, который позволяет просто перетаскивать файлы с рабочего стола в указанный элемент, чтобы загрузить их. Обратите внимание, что этот компонент не обрабатывает ваши загрузки файлов на сервер.

Загрузка компонент всегда должен осуществляться индивидуально в соответствии с вашими требованиями. В нашем примере мы использовали Заполнитель и Файл формы компонентом, и применение drop и select запросы. Кроме того, мы использовали Прогресс компонент для иллюстрации прогресса загрузки.

Пример

Разметки

<div id="upload-drop" class="uk-placeholder">
    Info text... <a class="uk-form-file">Select a 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%;">...</div>
</div>

JavaScript

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

<script>

    $(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);
    });

</script>

JavaScript варианты

Обратного вызова события