原理介绍
本文的分块上传主要是使用html5的file对象对文件进行分块，然后一块块进行上传，后端接收上传的每块文件，判断分块是否上传完成，上传完成合并文件并删除所有分块。
demo目录结构
index.php
upload.php
uplod
block
前端代码
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分片上传</title>
</head>
<body>
选择文件：
<input type="file" name="file" id="upload"> <span>等待上传...</span>
<script src="http://zui.sexy/assets/jquery.js"></script>
<script type="text/javascript">
$('#upload').on('change', function() {
// 文件对象
var file = $('#upload')[0].files[0];
// 分块的大小 默认4M
var block = 1024 * 1024 * 1;
// 文件大小
var fileSize = file.size;
// 总的分块数
var totalCount = Math.ceil(fileSize / block);
var start = 0,
end = 0;
// 原文件名
var fileName = file.name;
// 生成随机的前缀
var prfix = Math.random();
for(var num = 0; num < totalCount; num++) {
start = num * block;
end = start + block;
blockFile = file.slice(start, end);
// 组装 FormData() 对象
var formData = new FormData();
formData.append('file', blockFile);
formData.append('num', num);
formData.append('fileName', fileName);
formData.append('prfix', prfix);
formData.append('totalCount', totalCount);
$.ajax({
url: 'upload.php',
type: 'post',
data: formData,
processData:false,
contentType:false,
dataType: 'json',
successs: function(msg) {
console.log(msg);
},
error: function(err) {
console.log(err);
}
});
}
});
</script>
</body>
</html>
后端代码
<?php
class UploadFile
{
public function upload()
{
// 接收 post 参数
$data = $_POST;
// 文件信息
$file = $_FILES;
// 分块文件上传
move_uploaded_file($file['file']['tmp_name'], 'upload/block/' . $data['prfix'] . '_' . $data['num']);
$done = 0;
// 判断文件是否上传完成
if ($data['num'] == ($data['totalCount'] - 1)) {
// 新的文件名
$ext = pathinfo($data['fileName'], PATHINFO_EXTENSION);
$newFileName = $data['prfix'] . '.' . $ext;
// 合并文件
for($i = 0; $i < $data['totalCount']; $i++) {
file_put_contents('upload/' . $newFileName, file_get_contents('upload/block/' . $data['prfix'] . '_' . $i));
}
// 合并完成后删除分块文件
for($i = 0; $i < $data['totalCount']; $i++) {
unlink('upload/block/' . $data['prfix'] . '_' . $i);
}
$done = 1;
}
echo json_encode([
'code' => 0,
'msg' => '文件上传',
'data' => [
'donw' => $done,
]
]);
}
public function fileExists($fileName)
{
if (file_exists('upload/' . $fileName)) {
return true;
}
return false;
}
public function dirExists($dir)
{
if (!is_dir($dir)) {
mkdir('upload/' . $dir);
}
return true;
}
}
$upload = new UploadFile();
$upload->upload();
