Компонент Загрузка файлов Upload
Загружайте файлы через элемент формы ввода файла или область заполнителя.
Руководство
Руководство по использованию Upload
Этот компонент 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">Выбрать</button> </div>
Drop
Область перетаскивания :: 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); UIkit.modal.alert('Загрузка завершена!'); } }); }); </script>
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>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.upload(element, options);
События
Следующие события будут инициированы для элементов компонента «Upload»:
Имя события | Описание |
---|---|
upload |
Запускается до загрузки файлов. |