PHP+JS实现文件分块上传的示例代码

1. 概述

文件上传是Web开发中常见的需求之一，通常情况下，我们会将整个文件一次性上传到服务器。但是当需要上传大文件时，这种方式可能会面临一些问题，比如上传速度慢、服务器负载过高等。为了解决这些问题，可以将文件分块上传。

2. 文件分块上传的原理

文件分块上传的原理是将一个大文件分成多个小的文件块，逐个上传到服务器，并将这些文件块进行拼接。这样，即使某个文件块上传失败，也只需要重新上传该文件块，而不需要重新上传整个文件。

2.1 实现思路

实现文件分块上传的基本思路如下：

将大文件划分为多个文件块，并生成唯一的文件标识符

使用JavaScript将每个文件块以FormData的形式上传到服务器

服务器接收到每个文件块时，保存到临时目录中

当所有文件块上传完成后，服务器将文件块进行合并，保存为完整的文件

2.2 示例代码

接下来，我们使用PHP和JavaScript来实现文件分块上传的示例代码。

3. 客户端代码实现

首先，我们需要在客户端使用JavaScript来实现文件分块上传的功能。

// 获取文件对象
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
// 分割文件为多个文件块
function splitFile(file) {
  var fileSize = file.size;
  var chunkSize = 1024 * 1024; // 每个文件块的大小为1MB
  var chunkCount = Math.ceil(fileSize / chunkSize); // 文件块的总数
  var chunks = [];
  var start = 0;
  var end = chunkSize;
  for (var i = 1; i <= chunkCount; i++) {
    chunks.push(file.slice(start, end));
    start = end;
    end = start + chunkSize;
  }
  return chunks;
}
// 上传文件块的函数
function uploadChunks(chunks) {
  var formData = new FormData();
  chunks.forEach(function(chunk, index) {
    formData.append('chunk' + index, chunk);
  });
  // 使用AJAX进行文件上传
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php', true);
  xhr.send(formData);
}
// 文件选择的事件处理函数
fileInput.addEventListener('change', function() {
  var chunks = splitFile(file);
  uploadChunks(chunks);
});

4. 服务器端代码实现

然后，我们需要在服务器端使用PHP来处理接收到的文件块，并将它们合并为完整的文件。

// 获取上传的文件块
$chunks = [];
foreach ($_FILES as $key => $value) {
  $chunk = file_get_contents($_FILES[$key]['tmp_name']);
  $chunks[] = $chunk;
}
// 合并文件块
$finalFile = implode('', $chunks);
// 保存为完整的文件
file_put_contents('uploads/' . $_GET['file_id'], $finalFile);

5. 总结

通过文件分块上传的方式，我们可以有效地提升文件上传的速度和效率。同时，还可以实现断点续传的功能，当文件上传失败时，只需要重新上传失败的文件块，而不需要重新上传整个文件。

通过本文的示例代码，我们可以清晰地理解文件分块上传的实现原理，并可以根据实际需求进行相应的修改和扩展。