PHP+AJAX文件下载时进度条显示无穷大的问题求助

问题分析 #

进度条返回无穷大的核心原因是：XMLHttpRequest的progress事件中e.total值为0或未被正确获取，导致e.loaded / e.total触发除以0的运算，最终得到无穷大结果。而e.total无法获取的关键是后端未返回Content-Length响应头，前端无法知晓待下载文件的总大小。

解决方案 #

1. 后端（backup_log.php）添加Content-Length响应头 #

返回下载文件时，必须告知浏览器文件总大小，PHP示例代码如下：

<?php
$filePath = 'path/to/your/target-file'; // 替换为实际文件路径

if (file_exists($filePath)) {
    // 关键：返回文件总大小
    $fileSize = filesize($filePath);
    header("Content-Length: $fileSize");
    
    // 其他必要下载响应头
    header("Content-Type: application/octet-stream");
    header("Content-Disposition: attachment; filename=\"" . basename($filePath) . "\"");
    header("Cache-Control: no-cache");
    
    // 输出文件内容
    readfile($filePath);
    exit;
} else {
    http_response_code(404);
    echo "文件不存在";
}
?>

2. 前端JS代码优化（避免除以0，完善进度显示） #

修改progress事件处理逻辑，增加边界检查，并将百分比转为0-100的数值（适配progress标签默认范围）：

var _OBJECT_URL;
var progress = document.getElementById("progress");
var progressText = document.getElementById("progress-text");

document.querySelector('#form-download').addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();

    var request = new XMLHttpRequest();

    request.addEventListener('readystatechange', function() {
        if(request.readyState === 2 && request.status === 200) {
            // 下载已启动
        } else if(request.readyState === 3) {
            console.log('downloading');
        } else if(request.readyState === 4) {
            console.log("download complete");
            // 创建下载链接并触发下载
            _OBJECT_URL = window.URL.createObjectURL(request.response);
            const a = document.createElement('a');
            a.href = _OBJECT_URL;
            a.download = 'your-file-name.ext'; // 替换为实际文件名
            a.click();
            // 1分钟后释放资源
            setTimeout(() => window.URL.revokeObjectURL(_OBJECT_URL), 60000);
        }
    });

    request.addEventListener('progress', function(e) {
        // 检查total值有效性，避免除以0
        if (e.total > 0) {
            const percentComplete = (e.loaded / e.total) * 100;
            console.log(`${percentComplete.toFixed(2)}%`);
            progress.value = percentComplete;
            progressText.textContent = `${percentComplete.toFixed(1)}%`;
        } else {
            // 无法获取总大小时的提示
            progressText.textContent = "正在下载中...";
        }
    });

    request.responseType = 'blob';
    request.open('post', 'backup_log.php');
    request.send();
});

3. 完善HTML的progress标签 #

给progress标签添加max="100"和初始value="0"，确保进度显示正常：

<form id="form-download" method="POST">
    <center>
        <div class="btn" style="display: block">
            <button class="button" name="submit" role="button">Download</button>
        </div>
        <span style="margin-top: 10px" class="loader"></span>
        <progress id="progress" value="0" max="100"></progress>
        <span id="progress-text"></span>
    </center>
</form>

关键注意点 #

• 后端必须确保Content-Length数值准确，否则进度条计算会出现偏差
• 如果后端是动态生成文件（如实时压缩），无法提前获取文件大小，此时只能显示“正在下载”状态，无法展示精确进度

内容的提问来源于stack exchange，提问作者KolozJnr