Dropzone.js + php 分块上传
js
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="dist/min/basic.min.css">
<link rel="stylesheet" type="text/css" href="dist/min/dropzone.min.css">
<script src="dist/min/dropzone.min.js"></script>
</head>
<body>
<div id="myAwesomeDropzone" class="dropzone"></div>
<script>
//https://docs.dropzone.dev/configuration/basics/configuration-options
Dropzone.autoDiscover = false;
let myDropzone = new Dropzone("#myAwesomeDropzone", {
url: 'upload.php', //上传地址
method: 'post', //方式
uploadMultiple: false,
chunking: true,//块上传
chunkSize: 2 * 1024 * 1024,///如果chunking为true，则以字节为单位定义块大小。
retryChunks: true,//如果块失败，是否应该重试。
forceChunking:true,//如果启用了分块，这将定义是否**每个**文件都应该被分块，即使文件大小低于chunkSize。这意味着，将提交额外的块表单数据，并调用chunksUploaded回调。
success: function (file, response) {
//console.log('上传成功')
},
error: function (file, response) {
//console.log('上传失败')
},
});
</script>
</body>
</html>php
<?php
try {
set_time_limit(0);
$uploadFile = $_FILES['file'];
///print_r($uploadFile);
//分块上传
//当前第几个块
$dzchunkindex = $_POST['dzchunkindex'];
//总共块数量
$dztotalchunkcount = $_POST['dztotalchunkcount'];
///创建目录
if (!is_dir('./files-block/')) {
mkdir('./files-block/');
}
//判断文件是否已存在
if (!file_exists('./files-block/' . $dztotalchunkcount . '_' . $dzchunkindex . '_' . $uploadFile['name'])) {
//把每个块文件移到临时缓存目录
move_uploaded_file($uploadFile['tmp_name'], './files-block/' . $dztotalchunkcount . '_' . $dzchunkindex . '_' . $uploadFile['name']);
}
// 判断文件是否上传完成
if ($dzchunkindex == ($dztotalchunkcount - 1)) {
///创建目录
if (!is_dir('./files/')) {
mkdir('./files/');
}
/**
* 第一种合并文件方法
*/
/* // 合并文件
$filename = $uploadFile['name'];
$fp = fopen('./files/'.$filename, 'w');
for ($i = 0; $i < $dztotalchunkcount; $i++) {
$chunk = file_get_contents('./files-block/'.$dztotalchunkcount.'_'.$i.'_'.$uploadFile['name']);
//print_r($chunk);
fwrite($fp, $chunk);
}
}
fclose($fp); */
/**
* 第二种合并文件方法
*/
//合并文件
for ($i = 0; $i < $dztotalchunkcount; $i++) {
file_put_contents('./files/' . $uploadFile['name'], file_get_contents('./files-block/' . $dztotalchunkcount . '_' . $i . '_' . $uploadFile['name']), FILE_APPEND);
}
// 合并完成后删除分块文件
for ($i = 0; $i < $dztotalchunkcount; $i++) {
unlink('./files-block/' . $dztotalchunkcount . '_' . $i . '_' . $uploadFile['name']);
}
}
print_r(1);
} catch (Exception $e) {
echo "$e\n";
}
参考：
https://docs.dropzone.dev/configuration/basics/configuration-options
https://github.com/dropzone/dropzone/blob/main/src/options.js#L574