PHP 与 JS 大文件切片上传功能的实例源码实现

在当今的 Web 开发中，处理大文件上传是一个常见的挑战。传统的上传方式在面对大文件时往往会出现性能问题、超时错误等。为了解决这些问题，采用文件切片上传技术是一种有效的解决方案。

文件切片上传的基本原理是将大文件分割成多个小的切片，然后逐个上传这些切片，最后在服务器端将这些切片重新组合成原始的大文件。

在 PHP 中，我们可以通过以下步骤来实现服务器端的处理逻辑。创建一个用于接收切片的接口，通过获取请求中的相关参数，如切片的序号、总数、文件标识等。然后，将接收到的切片数据保存到服务器的临时目录中。在所有切片都上传完成后，根据保存的切片信息进行重组。

以下是一个简单的 PHP 示例代码：

<?php
$targetDir = "uploads/";
$chunk = $_FILES['chunk']['tmp_name'];
$chunkIndex = $_POST['chunkIndex'];
$totalChunks = $_POST['totalChunks'];
$fileName = $_POST['fileName'];

$targetFile = $targetDir. $fileName. '.part'. $chunkIndex;

move_uploaded_file($chunk, $targetFile);

if ($chunkIndex == $totalChunks - 1) {
    // 所有切片上传完成，进行文件重组
    $combinedFile = $targetDir. $fileName;
    $handle = fopen($combinedFile, 'wb');
    for ($i = 0; $i < $totalChunks; $i++) {
        $partFile = $targetDir. $fileName. '.part'. $i;
        $partContent = file_get_contents($partFile);
        fwrite($handle, $partContent);
        unlink($partFile); // 删除临时切片文件
    }
    fclose($handle);
}
?>

在 JavaScript 端，我们需要实现切片的生成和上传逻辑。使用 File 对象和 Blob 切片方法来分割文件。然后通过 XMLHttpRequest 或 fetch 发送每个切片到服务器。

以下是一个简单的 JavaScript 示例代码：

function uploadChunk(file, chunkIndex, totalChunks) {
    const chunkSize = Math.ceil(file.size / totalChunks);
    const start = chunkIndex * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkIndex', chunkIndex);
    formData.append('totalChunks', totalChunks);
    formData.append('fileName', file.name);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php');
    xhr.send(formData);
}

通过 PHP 和 JavaScript 的结合，我们成功实现了大文件的切片上传功能。这种方式不仅提高了上传的稳定性和效率，还能够更好地应对网络不稳定等情况。在实际应用中，还可以根据具体需求进行更多的优化和错误处理，以提供更完善的用户体验。