PHP 实现进度条

最新推荐文章于 2022-04-07 13:24:09 发布

下雨的声音丶

最新推荐文章于 2022-04-07 13:24:09 发布

阅读量299

点赞数 1

分类专栏： PHP实现文章标签： php html nginx apache

本文链接：https://blog.csdn.net/qq_23033339/article/details/106423914

版权

PHP实现专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用的是PHP的ob 函数实现

具体函数可参考 PHP官方文档Output Control 函数

前端使用了iframe具体代码如下

ob_function.php


if (ob_get_level() == 0) {
    ob_start();
}
$progress = 0;
while ($progress < 100) {
    $progress += rand(1, 20);
    if ($progress > 100) {
        $progress = 100;
    }
    echo "<script>parent.updateProgress({$progress});</script>";
    echo str_pad('',4096)."\n";
    ob_flush();
    flush();
    sleep(1);
}
ob_end_flush();

ob.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="start">开始</button>
<div id="name"></div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
    $(function () {
        $('#start').click(function () {
            if ($('#my-iframe').length == 0) {
                $('body').append('<iframe style="display: none" id="my-iframe" src="/ob_function.php"></iframe>');
            }
        });
    });
    function updateProgress(progress) {
        $('#name').html(progress + '%');
        if (progress == 100) {
            $('#my-iframe').remove();
        }
    }
</script>

</html>

服务器如果是nginx 需要修改nginx配置文件在http 块里面增加或修改

proxy_buffering off;
gzip off;
fastcgi_keep_conn on;

下雨的声音丶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PHP 实现进度条

使用的是PHP的ob 函数实现具体函数可参考 PHP官方文档Output Control 函数前端使用了iframe具体代码如下ob_function.phpif (ob_get_level() == 0) { ob_start();}$progress = 0;while ($progress < 100) { $progress += rand(1, 20); if ($progress > 100) { $progress
复制链接

扫一扫