58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
|
window.onload = function () {
|
|||
|
|
// auto-submit by click file input
|
|||
|
|
document.getElementById('upload_files').onchange = (e) => {
|
|||
|
|
upload_files(e.target);
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function upload_files(files_upload) {
|
|||
|
|
let form_data = new FormData();
|
|||
|
|
let upload_button = document.getElementById('upload_button');
|
|||
|
|
|
|||
|
|
update_upload_status(`Загружается ${files_upload.files.length} файл(а, ов)`);
|
|||
|
|
for (var i = 0; i < files_upload.files.length; i++) {
|
|||
|
|
form_data.append('files', files_upload.files[i]);
|
|||
|
|
}
|
|||
|
|
upload_button.classList.add('d-none');
|
|||
|
|
files_upload.value = null;
|
|||
|
|
|
|||
|
|
let request = new XMLHttpRequest();
|
|||
|
|
request.open('POST', '/upload');
|
|||
|
|
|
|||
|
|
request.upload.addEventListener('progress', function (e) {
|
|||
|
|
let percent_completed = (e.loaded / e.total) * 100;
|
|||
|
|
change_upload_state(Math.floor(percent_completed));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
request.addEventListener('load', function (e) {
|
|||
|
|
update_upload_status();
|
|||
|
|
upload_button.classList.remove('d-none');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
request.send(form_data);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function change_upload_state(percent_completed) {
|
|||
|
|
let upload_state = document.getElementById('upload_state');
|
|||
|
|
upload_state.classList.remove('d-none');
|
|||
|
|
|
|||
|
|
if (percent_completed == 100) {
|
|||
|
|
upload_state.childNodes[1].style.width = '0%';
|
|||
|
|
upload_state.setAttribute('aria-valuenow', 0);
|
|||
|
|
upload_state.classList.add('d-none');
|
|||
|
|
|
|||
|
|
update_upload_status('Сохранение файлов...');
|
|||
|
|
|
|||
|
|
return;
|
|||
|
|
} else {
|
|||
|
|
upload_state.childNodes[1].style.width = `${percent_completed}%`;
|
|||
|
|
upload_state.setAttribute('aria-valuenow', percent_completed);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function update_upload_status(message = '') {
|
|||
|
|
let upload_status = document.getElementById('upload_status');
|
|||
|
|
|
|||
|
|
upload_status.innerText = message;
|
|||
|
|
}
|