基于php+webuploader的大文件分片上传，支持断点续传，带进度条

以下是一个使用PHP和WebUploader实现大文件分片上传，支持断点续传的示例代码。

首先，确保你已经安装了WebUploader前端库和PHP环境。

前端（HTML + JavaScript）:




<!DOCTYPE html>
<html>
<head>
    <title>大文件分片上传</title>
    <script src="//cdn.jsdelivr.net/npm/webuploader/dist/webuploader.min.js"></script>
</head>
<body>
<div id="uploader">
    <div class="btns">
        <div id="filePicker">选择文件</div>
        <button id="uploadBtn">开始上传</button>
    </div>
    <div class="progress">
        <div id="progressBar" style="width: 0%;">0%</div>
    </div>
</div>
 
<script>
    var uploader = WebUploader.create({
        auto: true,
        server: 'upload.php',
        pick: '#filePicker',
        chunked: true, // 开启分片上传
        chunkSize: 1024 * 1024, // 每片1MB
        threads: 3,
    });
 
    uploader.on('uploadProgress', function (file, percentage) {
        var $progressBar = $('#progressBar');
        $progressBar.width(percentage * 100 + '%');
        $progressBar.text(Math.floor(percentage * 100) + '%');
    });
 
    $('#uploadBtn').click(function () {
        uploader.upload();
    });
</script>
</body>
</html>

后端 (PHP):




<?php
$config = [
    'rootPath' => './uploads/',
    'mergeDir' => './merge/',
    'mergeFile' => 'uploaded_file.dat',
];
 
$chunkIndex = isset($_POST['chunk']) ? intval($_POST['chunk']) : 0;
$chunkTotal = isset($_POST['chunks']) ? intval($_POST['chunks']) : 1;
$fileName = isset($_POST['name']) ? $_POST['name'] : '';
$filePath = $config['rootPath'] . $fileName;
$mergeDir = $config['mergeDir'];
$mergeFile = $mergeDir . $config['mergeFile'];
 
if (!is_dir($mergeDir)) {
    mkdir($mergeDir, 0777, true);
}
 
// 分片上传
if (!file_exists($filePath) && $chunkIndex == 0) {
    // 第一个分片创建空文件
    file_put_contents($filePath, '');
}
 
// 保存分片
move_uploaded_file($_FILES['file']['tmp_name'], $filePath . '.part' . $chunkIndex);
 
// 所有分片上传完毕进行合并
if (($chunkIndex + 1) == $chunkTotal) {
    // 合并分片
    $in = fopen($mergeFile, 'ab');
    for ($i = 0; $i < $chunkTotal; $i++) {
        $filePathTmp = $filePath . '.part' . $i;
        $inStream = fopen($filePathTmp, 'rb');
        stream_copy_to_stream($inStream, $in);
        fclose($inStream);
        unlink($filePathTmp);
    }
    fclose($in);
    // 处理完成，删除分片文件
    unlink($filePath);
}
 
echo json_encode(['success' => true]);
?>

这个示例中，前端使用WebUploader进行文件分片，后端接收分片并进行存储，最后当所有分片上传完毕时合并文件。合并后的文件可以进行后续处理，例如存储或转码。

基于php+webuploader的大文件分片上传，支持断点续传，带进度条

评论已关闭

推荐阅读