php简单实现文件断点和百分比上传

最新推荐文章于 2024-03-31 11:34:17 发布

PHPlai

最新推荐文章于 2024-03-31 11:34:17 发布

阅读量337

点赞数 1

分类专栏： php js 文章标签： php 开发语言 html5 js

本文链接：https://blog.youkuaiyun.com/weixin_39934453/article/details/131923923

版权

php 同时被 2 个专栏收录

264 篇文章

订阅专栏

25 篇文章

订阅专栏

一、要实现PHP断点上传，可以使用以下步骤：

在前端创建一个文件上传表单，包含一个文件选择输入和一个提交按钮。
将表单的提交目标设置为一个PHP脚本，用于处理文件上传。
在PHP脚本中，首先检查是否有文件上传，如果有，将文件保存到服务器上的临时目录中。
获取上传文件的相关信息，如文件名、文件大小等。
将文件信息保存到数据库或其他持久化存储中，以便进行断点续传。
在前端，可以使用JavaScript监听文件的上传进度，并将进度信息发送给后端。
在后端，根据接收到的进度信息，更新数据库中的文件上传进度。
如果上传过程中出现中断或错误，可以根据数据库中的进度信息，恢复上传。需要注意的是，断点上传需要在服务器端实现文件的分块上传和合并，以及在前端实现上传进度的监控和断点续传的逻辑。这涉及到文件的分块处理、进度管理和文件合并等复杂的操作。可以使用一些第三方库或框架来简化开发过程，如Resumable.js、Dropzone.js等。

二、创建上传文件html

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>文件断点上传</title>
    <style>
        #progressWrapper {
            display: flex;
            align-items: center;
        }
        #progressBar {
            flex: 1;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<h1>文件断点上传示例</h1>
<input type="file" id="fileInput">
<button onclick="upload()">上传</button>
<div id="progressWrapper">
    <span id="progressPercentage">0%</span>
    <progress id="progressBar" value="0" max="100"></progress>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var chunkSize = 1024 * 1024; // 1MB
    var progressBar = document.getElementById('progressBar');
    var progressPercentage = document.getElementById('progressPercentage');
    function upload() {
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        if (file) {
            uploadFile(file);
        }
    }
    function uploadFile(file) {
        var start = 0;
        var end = chunkSize;
        var totalSize = file.size;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'test.php', true);
        // 上传进度事件
        xhr.upload.addEventListener('progress', function(event) {
            if (event.lengthComputable) {
                var percent = (event.loaded / event.total) * 100;
                progressBar.value = percent;
                progressPercentage.textContent = percent.toFixed(2) + '%';
            }
        });
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var receivedBytes = parseInt(xhr.responseText);
                    if (receivedBytes < totalSize) {
                        start = receivedBytes;
                        end = start + chunkSize;
                        uploadNextChunk();
                    } else {
                        alert('文件上传成功！');
                    }
                } else {
                    alert('上传失败，错误码：' + xhr.status);
                }
            }
        };
        function uploadNextChunk() {
            var chunk = file.slice(start, end);
            var formData = new FormData();
            formData.append('chunk', chunk);
            formData.append('start', start);
            formData.append('file', file);
            xhr.send(formData);
        }
        uploadNextChunk();
    }
</script>
</body>
</html>

三、上传test.php文件

<?php

$targetDir = "./uploads/"; // 文件保存目录，确保该目录存在并可写
$chunkSize = 1024 * 1024; // 1MB
if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_FILES["chunk"]) && isset($_POST["start"])) {
    $chunk = $_FILES["chunk"];
    $files = $_FILES["file"];
    $start = intval($_POST["start"]);
    $fileName = $files["name"];
    $filePath = $targetDir . $fileName;
    // 获取已上传的总字节数
    $receivedBytes = 0;
    if (file_exists($filePath)) {
        $receivedBytes = filesize($filePath);
    }
    // 如果是第一个块，创建或覆盖目标文件
    if ($start === 0) {
        $file = fopen($filePath, "wb");
        if (!$file) {
            echo "无法打开文件";
            exit;
        }
    } else {
        // 如果不是第一个块，以追加的方式打开目标文件
        $file = fopen($filePath, "ab");
        if (!$file) {
            echo "无法打开文件";
            exit;
        }
        // 移动文件指针到已上传的位置
        fseek($file, $receivedBytes);
    }
    // 将块数据追加到目标文件
    if (fwrite($file, file_get_contents($chunk["tmp_name"])) === false) {
        echo "写入文件失败";
        exit;
    }
    // 关闭文件
    fclose($file);
    // 计算已上传的总字节数
    $receivedBytes += $chunk["size"];
    // 返回已上传的总字节数给客户端
    echo $receivedBytes;
}
?>