在现代的Web开发中，文件上传是一个常见的需求。而对于一些大文件的上传，传统的上传方式常常会因为文件过大而导致上传失败。这时，分片上传（Chunked Upload）技术就显得非常重要。通过将大文件分成多个小块进行上传，能够有效地解决文件上传的各种问题。
本文将介绍如何使用PHP与Web Uploader插件结合，实现分片上传文件的功能。我们将分为前端和后端两部分来实现。
前端：使用Web Uploader
Web Uploader是一个支持分片上传的开源文件上传插件，非常容易集成。在使用前，确保引入相关的CSS与JS文件。
- 引入Web Uploader相关文件:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文件分片上传</title>
<link rel="stylesheet" type="text/css" href="path/to/webuploader.css">
</head>
<body>
<div id="uploader" class="wu-example">
<div class="queueList"></div>
<div class="statusBar" style="display:none">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div>
<div class="info"></div>
<div class="btns">
<div id="filePicker">选择文件</div>
<div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
<script src="path/to/webuploader.js"></script>
<script>
var uploader = WebUploader.create({
auto: false,
swf: 'path/to/Uploader.swf',
server: 'upload.php',
pick: '#filePicker',
chunked: true,
chunkSize: 512 * 1024, // 每个分片的大小 512KB
fileNumLimit: 1,
accept: {
title: 'Files',
extensions: 'jpg,jpeg,png,gif,pdf',
mimeTypes: 'image/*,application/pdf'
}
});
uploader.on('fileQueued', function(file) {
// 添加文件到队列
console.log('文件添加成功：', file);
uploader.upload(); // 开始上传
});
uploader.on('uploadProgress', function(file, percentage) {
var $progress = $('.progress');
$progress.find('.text').text(Math.round(percentage * 100) + '%');
$progress.find('.percentage').css('width', Math.round(percentage * 100) + '%');
});
uploader.on('uploadSuccess', function(file, response) {
console.log('上传成功:', response);
});
uploader.on('uploadError', function(file) {
console.log('上传出错:', file);
});
</script>
</body>
</html>
后端：PHP实现文件分片接收
在后端，我们需要编写PHP脚本来处理分片上传。我们将接收每个分片并将其存储在服务器的临时目录中，最后将所有分片合并成一个完整的文件。
- 编写upload.php:
<?php
$uploadDir = 'uploads/'; // 上传的文件存放目录
if (!file_exists($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
// 获取分片信息
$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
$totalChunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0;
$fileName = isset($_REQUEST["name"]) ? $_REQUEST["name"] : '';
$targetFile = $uploadDir . $fileName;
// 临时文件路径
$tempFilePath = $targetFile . '.part' . $chunk;
// 将分片写入临时文件
if (move_uploaded_file($_FILES['file']['tmp_name'], $tempFilePath)) {
// 检查是否所有分片都上传完毕
if ($chunk + 1 == $totalChunks) {
// 合并所有分片
$fp = fopen($targetFile, 'wb');
for ($i = 0; $i < $totalChunks; $i++) {
$partFilePath = $targetFile . '.part' . $i;
if (file_exists($partFilePath)) {
fwrite($fp, file_get_contents($partFilePath));
unlink($partFilePath); // 删除临时分片
}
}
fclose($fp);
echo json_encode(['status' => 'success', 'message' => '文件上传成功']);
} else {
echo json_encode(['status' => 'success', 'message' => '分片上传成功']);
}
} else {
echo json_encode(['status' => 'error', 'message' => '分片上传失败']);
}
?>
总结
通过上述代码，我们实现了文件的分片上传功能。在前端采用Web Uploader插件用于选择文件和处理上传进度，而后端使用PHP来接收和合并分片。这样即便上传的是一个大文件，用户也能流畅地进行文件上传，提升了用户体验。
这种方式在处理大文件上传时十分有效，尤其是在网络不稳定或带宽有限的情况下，分片上传能够有效减少已上传数据的丢失率，大大提高了文件上传的成功率。希望本篇文章能够帮助你理解和实现分片上传文件的功能。
