当前位置:首页 > PHP

php实现分片上传

2026-03-13 06:26:18PHP

PHP 实现分片上传的方法

分片上传(Chunked Upload)通常用于大文件上传,通过将文件分割成多个小块依次上传,可以避免单次上传大文件导致的超时或内存不足问题。以下是实现分片上传的关键步骤和代码示例。

前端实现分片切割与上传

前端需要使用 JavaScript 将文件分割成多个小块,并通过 AJAX 依次上传。以下是一个简单的实现示例:

// 选择文件后触发上传
document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const chunkSize = 1 * 1024 * 1024; // 每个分片大小为 1MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    let currentChunk = 0;

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

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

        fetch('upload.php', {
            method: 'POST',
            body: formData
        }).then(response => response.json())
          .then(data => {
              if (currentChunk < totalChunks - 1) {
                  currentChunk++;
                  uploadChunk();
              } else {
                  console.log('上传完成');
              }
          });
    }

    uploadChunk();
});

后端 PHP 接收分片并合并

PHP 后端需要接收每个分片并临时保存,待所有分片上传完成后合并为一个完整的文件。

// upload.php
$targetDir = "uploads/tmp/";
$uploadDir = "uploads/";
$fileName = $_POST['fileName'];
$chunkIndex = $_POST['chunkIndex'];
$totalChunks = $_POST['totalChunks'];

// 确保临时目录存在
if (!file_exists($targetDir)) {
    mkdir($targetDir, 0777, true);
}

// 临时分片文件名
$tmpFileName = $targetDir . $fileName . '.part' . $chunkIndex;

// 保存分片文件
move_uploaded_file($_FILES['file']['tmp_name'], $tmpFileName);

// 检查是否所有分片已上传完成
$allPartsUploaded = true;
for ($i = 0; $i < $totalChunks; $i++) {
    if (!file_exists($targetDir . $fileName . '.part' . $i)) {
        $allPartsUploaded = false;
        break;
    }
}

// 合并分片
if ($allPartsUploaded) {
    $finalFile = $uploadDir . $fileName;
    if ($fp = fopen($finalFile, 'wb')) {
        for ($i = 0; $i < $totalChunks; $i++) {
            $partFile = $targetDir . $fileName . '.part' . $i;
            $content = file_get_contents($partFile);
            fwrite($fp, $content);
            unlink($partFile); // 删除临时分片
        }
        fclose($fp);
        echo json_encode(['status' => 'success', 'message' => '文件上传完成']);
    } else {
        echo json_encode(['status' => 'error', 'message' => '无法创建最终文件']);
    }
} else {
    echo json_encode(['status' => 'processing', 'message' => '分片上传中']);
}

优化与注意事项

  • 断点续传:记录已上传的分片索引,避免重复上传。
  • 文件校验:合并完成后通过 MD5 或 SHA1 校验文件完整性。
  • 清理临时文件:定期清理未完成的临时分片文件。
  • 并发控制:限制同时上传的分片数量,避免服务器压力过大。

使用第三方库简化实现

如果需要更成熟的解决方案,可以考虑以下第三方库:

php实现分片上传

  • Dropzone.js:支持分片上传的前端库。
  • Resumable.js:专为分片上传设计的 JavaScript 库。
  • Plupload:功能强大的文件上传库,支持分片上传。

标签: 分片上传
分享给朋友:

相关文章

vue实现头像上传

vue实现头像上传

实现头像上传功能 在Vue中实现头像上传功能通常需要结合文件上传组件和后端接口处理。以下是具体实现步骤: 前端组件实现 创建文件上传组件模板部分: <template> <d…

vue实现上传

vue实现上传

Vue 实现文件上传 在 Vue 中实现文件上传功能可以通过原生 HTML5 的 <input type="file"> 元素结合 Vue 的数据绑定和事件处理来实现。以下是几种常见的实现…

vue实现上传头像

vue实现上传头像

使用 Vue 实现上传头像 前端实现 创建一个文件上传组件,使用 <input type="file"> 元素选择文件,并通过 FileReader 预览图片。 <template…

vue 怎么实现上传

vue 怎么实现上传

Vue 实现文件上传的方法 使用原生 HTML5 文件上传 通过 <input type="file"> 元素结合 Vue 的数据绑定实现基础文件上传功能。 <template&g…

vue实现图片重新上传

vue实现图片重新上传

实现图片重新上传功能 在Vue中实现图片重新上传功能,通常涉及文件选择、预览、上传和重置等步骤。以下是一个完整的实现方案: 模板部分 <template> <div>…

vue怎么实现视频上传

vue怎么实现视频上传

实现视频上传功能 在Vue中实现视频上传功能通常需要结合HTML5的<input type="file">元素和后端API。以下是实现方法: 前端实现 创建文件上传组件模板: <…