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

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

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

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

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

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

Пример

Присоедините несколько файлов, перетащив их сюда, или выберите один .
0%

Разметка

<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.

<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

Option Possible value Default Description
method string POST HTTP method used for the upload
action string '' Target url for the upload
single boolean true Send each file one by one
param string files[] Post query name
params JSON Object {} Additional request parameters
headers JSON Object {} Additional request headers
allow string *.* File filter
filelimit integer false Limit the number of files to upload
type (text | json) text Response type from server

Callback events

Name Parameter
before settings, files
beforeAll files
beforeSend xhr
progress percent
complete response, xhr
allcomplete response, xhr
notallowed file, settings
loadstart event
load event
loadend event
error event
abort event
readystatechange event