php分片上传(简单实现)

最新推荐文章于 2025-06-14 17:37:30 发布

原创最新推荐文章于 2025-06-14 17:37:30 发布 · 3.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#php #分片上传

php 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用PHP和WebUploader插件实现的分片上传方案。前端通过WebUploader设置分片大小并发送请求，后端接收分片并存储，最后合并所有分片成完整文件。

1. upload.php

<?php
/**
 * Created by PhpStorm.
 * User: wuyf
 * Date: 2019/8/16
 * Time: 上午10:38
 */

//储存分片
$tmp_dir = '../storage/upload/tmp_chunk/' . $_REQUEST['name'] . '/';
if (! is_dir($tmp_dir)) {
    mkdir($tmp_dir, 0777, true);
}
move_uploaded_file($_FILES['file']['tmp_name'], $tmp_dir . $_REQUEST['chunk']);

//合并分片
if ($_REQUEST['chunk'] == $_REQUEST['chunks'] - 1) { //最后一个分片
    $target_file = '../storage/upload/';
    if (! is_dir($target_file)) {
        mkdir($target_file, 0777, true);
    }
    $target_file .= $_REQUEST['name'];
    $handle = fopen($target_file, 'x+');
    for ($i=0; $i<$_REQUEST['chunks']; $i++) {
        fwrite($handle, file_get_contents($tmp_dir . $i));
    }
    fclose($handle);
}

$msg = [
    '$_FILES' => json_encode($_FILES),
    '$_REQUEST' => json_encode($_REQUEST),
];
echo json_encode(['status' => 1, 'msg' => json_encode($msg)]);

2. web_upload.html

<!doctype html>
<html lang="en">
<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">

    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="../static/js/webuploader-0.1.5/webuploader.css">

    <title>Document</title>
</head>
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>
</body>
</html>

<!--引入JS-->
<script src="../static/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../static/js/webuploader-0.1.5/webuploader.min.js"></script>
<script>
    let uploader = new WebUploader.Uploader({

        // swf文件路径
        swf: '../static/js/webuploader-0.1.5/Uploader.swf',

        // 文件接收服务端。
        server: 'http://127.0.0.1/test/php/upload.php',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',

        // 分片上传。
        chunked: true,
        chunkSize: 2 * 1024 * 1024,

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });

    let $list = $('#thelist');
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        $list.append( '<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>' );
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        let $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').appendTo( $li ).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');

        $percent.css( 'width', percentage * 100 + '%' );
    });

    //开始上传
    $('#ctlBtn').click(function () {
        uploader.upload();
    });

    uploader.on( 'uploadSuccess', function( file, response ) {
        if (response.status) {
            $( '#'+file.id ).find('p.state').text('已上传');
        } else {
            $( '#'+file.id ).find('p.state').text(response.msg);
        }

    });

    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
    });

    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });

</script>

注:webuploader插件需要自行引入.

最后, 简单分析下原理:

前端设置分片上传后, 每次的请求参数会带上分片共个数(chunks)和当前分序号(chunk). $_REQUEST获取,如下:

这是打印的两个分片请求参数.

分片上传大致分为两步:

第一步:存储分片, 这和普通上传基本上是一样的, 区别是分片要按序号存好.

第二步: 合并分片, 在判断到是最后一个分片时开始合并(当然这里写的并不完善).