使用纯PHP/AJAX上传进度？

PHP/AJAX 文件上传进度实现指南

基础概念

文件上传进度监控是指在文件上传过程中实时获取上传进度的功能，这对于大文件上传尤其重要，可以改善用户体验。

实现方法

1. 使用 PHP 的 Session Upload Progress

PHP 5.4+ 内置了上传进度跟踪功能，通过 session.upload_progress 配置实现。

配置 php.ini:

session.upload_progress.enabled = On
session.upload_progress.cleanup = On
session.upload_progress.prefix = "upload_progress_"
session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"
session.upload_progress.freq = "1%"

前端实现 (HTML + AJAX):

<form id="uploadForm" enctype="multipart/form-data">
    <input type="hidden" name="<?php echo ini_get('session.upload_progress.name'); ?>" value="test" />
    <input type="file" name="file1" />
    <input type="submit" value="Upload" />
</form>

<div id="progress"></div>

<script>
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    var formData = new FormData(this);
    var xhr = new XMLHttpRequest();
    
    // 上传进度事件
    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            var percent = Math.round((e.loaded / e.total) * 100);
            document.getElementById('progress').innerHTML = percent + '%';
        }
    }, false);
    
    // 上传完成事件
    xhr.addEventListener('load', function() {
        document.getElementById('progress').innerHTML = 'Upload complete!';
    }, false);
    
    xhr.open('POST', 'upload.php', true);
    xhr.send(formData);
});
</script>

后端处理 (upload.php):

<?php
session_start();

// 处理文件上传
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['file1'])) {
        $uploadDir = 'uploads/';
        $uploadFile = $uploadDir . basename($_FILES['file1']['name']);
        
        if (move_uploaded_file($_FILES['file1']['tmp_name'], $uploadFile)) {
            echo "File uploaded successfully.";
        } else {
            echo "File upload failed.";
        }
    }
}
?>

2. 使用 AJAX 轮询上传进度

如果需要更精确的控制，可以结合后端进度查询：

前端代码:

function uploadFile() {
    var formData = new FormData();
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var uploadId = 'upload_' + Date.now();
    
    formData.append('file', file);
    formData.append('upload_id', uploadId);
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);
    
    // 启动上传
    xhr.send(formData);
    
    // 开始轮询进度
    var progressInterval = setInterval(function() {
        fetch('progress.php?upload_id=' + uploadId)
            .then(response => response.json())
            .then(data => {
                document.getElementById('progress').innerHTML = data.progress + '%';
                if (data.progress >= 100) {
                    clearInterval(progressInterval);
                }
            });
    }, 1000);
}

后端进度查询 (progress.php):

<?php
session_start();

if (isset($_GET['upload_id'])) {
    $key = ini_get('session.upload_progress.prefix') . $_GET['upload_id'];
    if (!empty($_SESSION[$key])) {
        $progress = $_SESSION[$key];
        $percent = ($progress['bytes_processed'] / $progress['content_length']) * 100;
        echo json_encode(['progress' => round($percent, 2)]);
        exit;
    }
}

echo json_encode(['progress' => 0]);
?>