前段HTML代码如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分块上传大文件</title>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="uploadFileInChunks()">上传</button>
<progress id="progressBar" value="0" max="100"></progress>
<script>
const CHUNK_SIZE = 1024 * 1024; // 每个分块的大小为 1MB
function uploadFileInChunks() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const progressBar = document.getElementById('progressBar');
if (file) {
let start = 0;
let chunkIndex = 0;
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
function uploadChunk() {
const end = Math.min(start + CHUNK_SIZE, file.size);
const chunk = file.slice(start, end);
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('chunkIndex', chunkIndex);
formData.append('totalChunks', totalChunks);
formData.append('fileName', file.name);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1/index.php', true);
xhr.onload = function () {
if (xhr.status === 200) {
start = end;
chunkIndex++;
const percentComplete = (chunkIndex / totalChunks) * 100;
progressBar.value = percentComplete;
if (start < file.size) {
uploadChunk();
} else {
alert('文件上传完成');
}
}
};
xhr.send(formData);
}
uploadChunk();
}
}
</script>
</body>
</html>
后端PHP代码如下:
php
<?php
// 设置允许跨域请求
header("Access-Control-Allow-Origin: *");
$chunk = $_FILES['chunk']['tmp_name'];
$chunkIndex = (int)$_POST['chunkIndex'];
$totalChunks = (int)$_POST['totalChunks'];
$fileName = $_POST['fileName'];
$uploadDir = './temp_uploads/';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
$tempFilePath = $uploadDir . $fileName . '.part' . $chunkIndex;
move_uploaded_file($chunk, $tempFilePath);
if ($chunkIndex === $totalChunks - 1) {
$outputFilePath = $uploadDir . $fileName;
$outputFile = fopen($outputFilePath, 'wb');
for ($i = 0; $i < $totalChunks; $i++) {
$partFilePath = $uploadDir . $fileName . '.part' . $i;
$partFile = fopen($partFilePath, 'rb');
stream_copy_to_stream($partFile, $outputFile);
fclose($partFile);
unlink($partFilePath);
}
fclose($outputFile);
}