denis/upload_big_files
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Сделал вывод процесса загрузски

Browse Source
This commit is contained in:
DenisM
2026-05-21 22:30:56 +03:00
parent b903cca6e2
commit 8d5ab828c1
3 changed files with 72 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@@ -5,10 +5,25 @@
<script src="lib_chunk_file.js"></script> <script src="lib_chunk_file.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
<style>
li {
padding: 10px 15px;
list-style: none;
border:solid 1px #ddd;
border-radius: 5px;
width: max-content;
}
li span {
display: inline-block;
margin: 0 15px 0 0;
}
</style>
</head> </head>
<body> <body>
<input type="file" name="file_name"> <input type="file" multiple name="file_name">
<script> <script>
@@ -16,13 +31,43 @@
fileInput.addEventListener('change', (event) => { fileInput.addEventListener('change', (event) => {
statuss= document.createElement("ul");
event.target.after(statuss);
const files = event.target.files; const files = event.target.files;
const file = files[0]
if (file) { for (fil in files){
uploadFileInChunks(file); file = files[fil]
}else{
alert("no file")
} if (file.size) {
console.log(">>>>>>>>",fil)
li = document.createElement("li");
namefile = document.createElement("span");
namefile.innerHTML =file.name;
chanh = document.createElement("b");
chanh.id="status_bar_"+fil
chanh.innerHTML = 0;
full = document.createElement("b");
full.innerHTML = " / " + Number(file.size/1024/1024).toFixed(2);
li.append(namefile);
li.append(chanh);
li.append(full);
statuss.append(li);
uploadFileInChunks(file,fil);
}
}
}); });
</script> </script>
</body> </body>

12
lib_chunk_file.js
View File

@@ -2,9 +2,11 @@
// Размер чанка в байтах // Размер чанка в байтах
const CHUNK_SIZE = 1024 * 1024; // 1MB const CHUNK_SIZE = 1024 * 1024; // 1MB
async function uploadFileInChunks(file) { async function uploadFileInChunks(file,num) {
const totalChunks = Math.ceil(file.size / CHUNK_SIZE); const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) { for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
@@ -15,7 +17,7 @@ async function uploadFileInChunks(file) {
// Извлекаем чанк из файла // Извлекаем чанк из файла
const chunk = file.slice(start, end); const chunk = file.slice(start, end);
// Создаём FormData для отправки чанка // Создаём FormData для отправки чанкаd
const formData = new FormData(); const formData = new FormData();
formData.append('file_chunk', chunk); formData.append('file_chunk', chunk);
formData.append('chunk_index', chunkIndex); formData.append('chunk_index', chunkIndex);
@@ -26,6 +28,12 @@ async function uploadFileInChunks(file) {
await fetch('upload.php', { await fetch('upload.php', {
method: 'POST', method: 'POST',
body: formData body: formData
}).
then((res)=> res.json()).
then((res)=>{
document.getElementById("status_bar_"+num).innerHTML = Number(res.size/1024/1024).toFixed(2) || 0
console.log(res)
}); });
} }
} }

13
upload.php
View File

@@ -22,17 +22,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
fclose($in); fclose($in);
} }
fclose($out); fclose($out);
} else { } else {
exit(json_encode(['status' => 'error', 'message' => 'Не удалось открыть временный файл'])); header('Content-Type: application/json; charset=utf-8');
exit(json_encode(['status' => 'error', 'message' => 'Не удалось открыть временный файл', 'size'=>0]));
} }
// Если это последняя часть, переименовываем файл в итоговый // Если это последняя часть, переименовываем файл в итоговый
if ($chunkIndex === $totalChunks - 1) { if ($chunkIndex === $totalChunks - 1) {
$finalFilePath = $uploadDir . $originalFilename; $finalFilePath = $uploadDir . $originalFilename;
rename($tempFilePath, $finalFilePath); rename($tempFilePath, $finalFilePath);
echo json_encode(['status' => 'success', 'message' => 'Файл успешно собран', 'path' => $finalFilePath]); header('Content-Type: application/json; charset=utf-8');
echo json_encode(['status' => 'success', 'message' => 'Файл успешно собран', 'path' => $finalFilePath, 'size'=>filesize($finalFilePath)]);
} else { } else {
echo json_encode(['status' => 'uploading', 'chunk' => $chunkIndex]); header('Content-Type: application/json; charset=utf-8');
echo json_encode(['status' => 'uploading', 'chunk' => $chunkIndex, 'size' => filesize($tempFilePath)]);
} }
} }
?> ?>