PHP simplemente implementa puntos de interrupción de archivos y cargas porcentuales

 

 1. Para implementar la carga del punto de interrupción de PHP, puede seguir los siguientes pasos:

  1. Cree un formulario de carga de archivos en la parte frontal con una entrada de selección de archivos y un botón de envío.
  2. Establezca el objetivo de envío del formulario en un script PHP que maneje la carga del archivo.
  3. En el script PHP, primero verifique si hay un archivo cargado y, de ser así, guarde el archivo en un directorio temporal en el servidor.
  4. Obtenga información sobre los archivos cargados, como el nombre del archivo, el tamaño del archivo, etc.
  5. Guarde la información del archivo en una base de datos u otro almacenamiento persistente para cargas reanudables.
  6. En el front-end, puede usar JavaScript para monitorear el progreso de carga del archivo y enviar la información de progreso al back-end.
  7. En el backend, actualice el progreso de carga del archivo en la base de datos de acuerdo con la información de progreso recibida.
  8. Si ocurre una interrupción o un error durante el proceso de carga, la carga se puede reanudar de acuerdo con la información de progreso en la base de datos. Cabe señalar que la carga con puntos de interrupción requiere la carga y combinación de archivos en partes en el lado del servidor, así como la supervisión del progreso de la carga y la lógica de reanudar las cargas en los puntos de interrupción en la parte frontal. Esto implica operaciones complejas como el procesamiento de bloques de archivos, la gestión del progreso y la fusión de archivos. Se pueden usar algunas bibliotecas o marcos de terceros para simplificar el proceso de desarrollo, como Resumable.js, Dropzone.js, etc.

2. Crear archivo de carga 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>

3. Cargue el archivo 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;
}
?>

4. Subir pantalla exitosa 

 

 

Supongo que te gusta

Origin blog.csdn.net/weixin_39934453/article/details/131923923
Recomendado
Clasificación