File size: 2,705 Bytes
5586a08 5bd6539 5586a08 a3dd876 5586a08 5bd6539 5586a08 5bd6539 5586a08 5bd6539 5586a08 5bd6539 5586a08 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV Upload</title>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #4CAF50; /* Зелёный цвет */
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
display: none; /* Изначально скрыт */
position: fixed; /* Фиксированное положение */
top: 50%; /* По центру по вертикали */
left: 50%; /* По центру по горизонтали */
transform: translate(-50%, -50%); /* Центрирование */
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1>Upload CSV File</h1>
<form id="uploadForm" enctype="multipart/form-data" method="post">
<input type="file" name="file" accept=".csv">
<label>
<input type="checkbox" name="verify_phone" value="1"> Verify Phone
</label>
<label>
<input type="checkbox" name="add_curator" value="1"> Add Curator
</label>
<input type="submit" value="Upload">
</form>
<div id="result"></div>
<div class="loader"></div>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
const form = new FormData(this);
const loader = document.querySelector('.loader');
loader.style.display = 'block'; // Показываем спиннер
fetch('/upload_csv', {
method: 'POST',
body: form
})
.then(response => response.json())
.then(data => {
document.getElementById('result').innerText = JSON.stringify(data, null, 2);
loader.style.display = 'none'; // Скрываем спиннер после завершения
})
.catch(error => {
console.error('Error:', error);
loader.style.display = 'none'; // Скрываем спиннер в случае ошибки
});
});
</script>
</body>
</html> |