以下是一个使用PHP和WebUploader实现大文件分片上传,支持断点续传的示例代码。
首先,确保你已经安装了WebUploader前端库和PHP环境。
前端(HTML + JavaScript):
<!DOCTYPE html>
<html>
<head>
<title>大文件分片上传</title>
<script src="//cdn.jsdelivr.net/npm/webuploader/dist/webuploader.min.js"></script>
</head>
<body>
<div id="uploader">
<div class="btns">
<div id="filePicker">选择文件</div>
<button id="uploadBtn">开始上传</button>
</div>
<div class="progress">
<div id="progressBar" style="width: 0%;">0%</div>
</div>
</div>
<script>
var uploader = WebUploader.create({
auto: true,
server: 'upload.php',
pick: '#filePicker',
chunked: true, // 开启分片上传
chunkSize: 1024 * 1024, // 每片1MB
threads: 3,
});
uploader.on('uploadProgress', function (file, percentage) {
var $progressBar = $('#progressBar');
$progressBar.width(percentage * 100 + '%');
$progressBar.text(Math.floor(percentage * 100) + '%');
});
$('#uploadBtn').click(function () {
uploader.upload();
});
</script>
</body>
</html>
后端 (PHP):
<?php
$config = [
'rootPath' => './uploads/',
'mergeDir' => './merge/',
'mergeFile' => 'uploaded_file.dat',
];
$chunkIndex = isset($_POST['chunk']) ? intval($_POST['chunk']) : 0;
$chunkTotal = isset($_POST['chunks']) ? intval($_POST['chunks']) : 1;
$fileName = isset($_POST['name']) ? $_POST['name'] : '';
$filePath = $config['rootPath'] . $fileName;
$mergeDir = $config['mergeDir'];
$mergeFile = $mergeDir . $config['mergeFile'];
if (!is_dir($mergeDir)) {
mkdir($mergeDir, 0777, true);
}
// 分片上传
if (!file_exists($filePath) && $chunkIndex == 0) {
// 第一个分片创建空文件
file_put_contents($filePath, '');
}
// 保存分片
move_uploaded_file($_FILES['file']['tmp_name'], $filePath . '.part' . $chunkIndex);
// 所有分片上传完毕进行合并
if (($chunkIndex + 1) == $chunkTotal) {
// 合并分片
$in = fopen($mergeFile, 'ab');
for ($i = 0; $i < $chunkTotal; $i++) {
$filePathTmp = $filePath . '.part' . $i;
$inStream = fopen($filePathTmp, 'rb');
stream_copy_to_stream($inStream, $in);
fclose($inStream);
unlink($filePathTmp);
}
fclose($in);
// 处理完成,删除分片文件
unlink($filePath);
}
echo json_encode(['success' => true]);
?>
这个示例中,前端使用WebUploader进行文件分片,后端接收分片并进行存储,最后当所有分片上传完毕时合并文件。合并后的文件可以进行后续处理,例如存储或转码。