Проценты при загрузке файла на сервер
<?php
// https://learn.javascript.ru/formdata
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (!empty($_FILES) && $_FILES['message_file']['error'] === 0) {
$filename = $_FILES['message_file']['name'];
$baseUrl = './';
$fileLink = $baseUrl . $filename;
if (move_uploaded_file($_FILES['message_file']['tmp_name'], $filename)) {
$res = ['answer' => 'ok', 'file' => "<img src='{$filename}' alt=''>", 'path' => "<a href='{$baseUrl}{$filename}'>{$fileLink}</a>"];
}
} else {
$res = ['answer' => 'error', 'file' => "File is required"];
}
echo json_encode($res); // ответ
exit(); // чтобы сама форма не передавалась в ответ
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 60px;
}
.load-file {
width: 300px;
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 36px;
}
#send {
padding: 8px;
border: 1px solid teal;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
#send:hover {
background-color: #008080;
color: #fff;
}
progress {
width: 150px;
height: 5px;
border: 1px solid #008080;
border-radius: 5px;
}
progress::-webkit-progress-bar {
background-color: #fff;
border-radius: 5px;
}
progress::-webkit-progress-value {
background-color: #008080;
border-radius: 5px;
}
progress::-moz-progress-bar {
width: 150px;
height: 5px;
border: 1px solid #008080;
border-radius: 5px;
}
#statusText {
font-size: 12px;
}
.loaded-files__title {
margin-bottom: 15px;
}
.loaded-files p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<form id="form" method="post" enctype="multipart/form-data">
<div class="load-file">
<input type="file" id="message_file" name="message_file" style="display: none" onchange="uploadFile()">
<button type="button" id="send" onclick="document.getElementById('message_file').click()">Загрузить файл</button>
<div class="load-progress">
<p id="statusText"></p>
<progress id="progressBar" value="0" max="100"></progress>
</div>
</div>
</form>
<div class="loaded-files" id="res">
<h3 class="loaded-files__title">Загруженные файлы</h3>
</div>
</div>
<script>
function uploadFile() {
const fileInput = document.getElementById('message_file');
const progressBar = document.getElementById('progressBar');
const statusText = document.getElementById('statusText');
const btn = document.getElementById('send');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('message_file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', './upload.php');
xhr.upload.onprogress = function(event) {
btn.textContent = 'Идет загрузка...';
btn.disabled = true;
const percentLoaded = Math.round((event.loaded / event.total) * 100);
progressBar.value = percentLoaded;
statusText.textContent = `Загружено ${percentLoaded}%`;
};
xhr.onloadend = function() {
if (xhr.status === 200) {
btn.textContent = 'Загрузить файл';
btn.disabled = false;
const response = JSON.parse(xhr.response);
statusText.textContent = 'Загружено 100%';
document.getElementById('res').insertAdjacentHTML('beforeend', `<p>${response.path}</p>`);
} else {
statusText.textContent = 'Ошибка при загрузке';
}
};
xhr.onerror = function() {
statusText.textContent = 'Ошибка соединения';
};
xhr.send(formData);
}
</script>
</body>
</html>