search
HomeBackend DevelopmentPHP ProblemHow to implement progress bar in php

How to implement progress bar in php

Sep 01, 2020 am 10:19 AM
phpprogress bar

How to implement the progress bar in php: 1. Use "output buffer control" to directly output the progress bar; 2. Use ajax to first request the logical processing address, and then use session or other storage media to save the processing progress.

How to implement progress bar in php

# Recommended: "

PHP Video Tutorial

There are two main ways to implement the progress bar in PHP. One is to use "output buffer control" to directly output the progress bar, and the other is the ajax method

Let me talk about it first. "Output buffer control" method:

This method mainly uses several buffer functions of PHP. This method can be run directly without changing the configuration file. The code is posted below:

<?php
set_time_limit(0);  //设置程序执行时间
ignore_user_abort(true);    //设置断开连接继续执行
header(&#39;X-Accel-Buffering: no&#39;);    //关闭buffer
header(&#39;Content-type: text/html;charset=utf-8&#39;);    //设置网页编码
ob_start(); //打开输出缓冲控制
echo str_repeat(&#39; &#39;,1024*4);    //字符填充
$width = 1000;
$html = &#39;<div style="margin:100px auto; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: %upx"><div style="padding: 0; background-color: white; border: 1px solid navy; width: %upx"><div id="progress" style="padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center; height: 16px"></div></div><div id="msg" style="font-family: Tahoma; font-size: 9pt;">正在处理...</div><div id="percent" style="position: relative; top: -34px; text-align: center; font-weight: bold; font-size: 8pt">0%%</div></div>&#39;;
echo sprintf($html, $width+8, $width);
echo ob_get_clean();    //获取当前缓冲区内容并清除当前的输出缓冲
flush();   //刷新缓冲区的内容,输出
$length = 11;
for($i=0; $i<$length; $i++) {
    sleep(rand(1,2));
    $proportion = ($i+1)/$length;
    if($i+1 == $length){
        $msg = &#39;同步完成&#39;;
    }else{
        $msg = &#39;正在同步第&#39; . ($i+1) . &#39;个用户&#39;;
    }
    $script = &#39;<script>document.getElementById("percent").innerText="%u%%";document.getElementById("progress").style.width="%upx";document.getElementById("msg").innerText="%s";</script>&#39;;
    echo sprintf($script, intval($proportion*100), intval(($i+1)/$length)*$width, $msg);
    echo ob_get_clean();    //获取当前缓冲区内容并清除当前的输出缓冲
    flush();   //刷新缓冲区的内容,输出
}

Note : This progress bar style was found online. After a slight modification, you can replace it with the style you want.

"ajax method" is a little more troublesome. The logic of this method is to use ajax to request first. (Preferably an asynchronous request) The address of "logical processing". During the logical processing, use session or other storage media (such as memcache, redis, etc.) to save the processing progress, and use ajax to request (preferably a synchronous request) for another query. The address of the progress to achieve real-time feedback

The code is posted below:

The first is the html file

<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="./jquery-1.10.2.min.js"></script><title>同步</title></head><body>
    <input type="button" name="syn" id="syn" value="同步" />
    <div id="progressBar" style="margin: 50px auto; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: 1008px;display:none">
        <div style="padding: 0; background-color: white; border: 1px solid navy; width: 1000px">
            <div id="progress" style="padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center; height: 16px"></div>
        </div>
        <div id="msg">正在处理...</div>
        <div id="percent" style="position: relative; top: -18px; text-align: center; font-weight: bold; font-size: 8pt">0%</div>
    </div></body><script>function query(timestamp){
    $.ajax({
        type:&#39;post&#39;,
        url:&#39;/test1.php&#39;,   //查询进度
        data:{ timestamp:timestamp},
        dataType: "json",
        async:false,
        success: function(data){
            if(data.code==&#39;10000&#39;){
                data1 = data.data;
                document.getElementById("percent").innerText= data1.percent + "%";
                document.getElementById("progress").style.width=data1.progress + "px";
                document.getElementById("msg").innerText=data1.msg;                if(data1.percent == 100){
                    $("#syn").attr(&#39;disabled&#39;, false);                    return ;
                }
            }else{
                document.getElementById("msg").innerText=data.msg;
            }
            setTimeout(&#39;query(&#39; + timestamp + &#39;)&#39;, 1000);
        }
    });
}
$("#syn").click(function(){
    var timestamp = Date.parse(new Date());
    $("#syn").attr(&#39;disabled&#39;, &#39;disabled&#39;);
    $("#progressBar").css(&#39;display&#39;, &#39;block&#39;);
     $.ajax({
        type:&#39;post&#39;,
        url:&#39;/test.php&#39;,    //执行处理
        data:{ timestamp:timestamp},
        dataType: "json",
        async:true,
        success: function(data){
            if(data.code==&#39;10000&#39;){
                console.log(&#39;同步成功&#39;);                //data1 = data.data;
                //document.getElementById("percent").innerText= data1.percent + "%";
                //document.getElementById("progress").style.width=data1.progress + "px";
                //document.getElementById("msg").innerText=data1.msg;
            }else{
                document.getElementById("msg").innerText=data1.msg;
            }
        }
    }); 
    setTimeout(&#39;query(&#39; + timestamp + &#39;)&#39;, 1000);
});</script></html>
test.php
<?php
set_time_limit(0);  //设置程序执行时间
ignore_user_abort(true);    //设置断开连接继续执行
$timestamp = $_POST[&#39;timestamp&#39;];   //省略一切校验
$width = 1000;
$length = 11;
for($i=0; $i<$length; $i++) {
    sleep(rand(1,2));    //模拟处理时间
    $proportion = ($i+1)/$length;
    if($i+1 == $length){
        $msg = &#39;同步完成&#39;;
    }else{
        $msg = &#39;正在同步第&#39; . ($i+1) . &#39;个用户&#39;;
    }
    $data = array(
        &#39;percent&#39; => intval($proportion*100),
        &#39;progress&#39; => intval($width*($i+1)/$length),
        &#39;msg&#39; => $msg
    );
    session_start();
    $_SESSION[&#39;now_percent&#39; . $timestamp] = $data;
    session_write_close();  //释放session锁
}
echo json_encode(array(
    &#39;code&#39; => 10000,
    &#39;data&#39; => $data
));
test1.php
<?php
//忽略所有校验,直接写主要部分
$timestamp = $_POST[&#39;timestamp&#39;];   //省略一切校验
session_start();
$now_percent = @$_SESSION[&#39;now_percent&#39; . $timestamp];
session_write_close();
if(empty($now_percent)){
    echo json_encode(array(
        &#39;code&#39; => 10001,
        &#39;msg&#39; => &#39;正在处理...&#39;
    ));exit;
}else{
    echo json_encode(array(
        &#39;code&#39; => 10000,
        &#39;data&#39; => $now_percent
    ));exit;
}

Note: 1. The reason why setinterval is not used to check regularly and setTimeout is used is because if If the set time is too short, and the request response time is too long, the display will be confused

2.
Be careful to release the session in time after using it, otherwise the query will keep waiting because the session is locked. It is best to release it after use

The above is the detailed content of How to implement progress bar in php. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
ACID vs BASE Database: Differences and when to use each.ACID vs BASE Database: Differences and when to use each.Mar 26, 2025 pm 04:19 PM

The article compares ACID and BASE database models, detailing their characteristics and appropriate use cases. ACID prioritizes data integrity and consistency, suitable for financial and e-commerce applications, while BASE focuses on availability and

PHP Secure File Uploads: Preventing file-related vulnerabilities.PHP Secure File Uploads: Preventing file-related vulnerabilities.Mar 26, 2025 pm 04:18 PM

The article discusses securing PHP file uploads to prevent vulnerabilities like code injection. It focuses on file type validation, secure storage, and error handling to enhance application security.

PHP Input Validation: Best practices.PHP Input Validation: Best practices.Mar 26, 2025 pm 04:17 PM

Article discusses best practices for PHP input validation to enhance security, focusing on techniques like using built-in functions, whitelist approach, and server-side validation.

PHP API Rate Limiting: Implementation strategies.PHP API Rate Limiting: Implementation strategies.Mar 26, 2025 pm 04:16 PM

The article discusses strategies for implementing API rate limiting in PHP, including algorithms like Token Bucket and Leaky Bucket, and using libraries like symfony/rate-limiter. It also covers monitoring, dynamically adjusting rate limits, and hand

PHP Password Hashing: password_hash and password_verify.PHP Password Hashing: password_hash and password_verify.Mar 26, 2025 pm 04:15 PM

The article discusses the benefits of using password_hash and password_verify in PHP for securing passwords. The main argument is that these functions enhance password protection through automatic salt generation, strong hashing algorithms, and secur

OWASP Top 10 PHP: Describe and mitigate common vulnerabilities.OWASP Top 10 PHP: Describe and mitigate common vulnerabilities.Mar 26, 2025 pm 04:13 PM

The article discusses OWASP Top 10 vulnerabilities in PHP and mitigation strategies. Key issues include injection, broken authentication, and XSS, with recommended tools for monitoring and securing PHP applications.

PHP XSS Prevention: How to protect against XSS.PHP XSS Prevention: How to protect against XSS.Mar 26, 2025 pm 04:12 PM

The article discusses strategies to prevent XSS attacks in PHP, focusing on input sanitization, output encoding, and using security-enhancing libraries and frameworks.

PHP Interface vs Abstract Class: When to use each.PHP Interface vs Abstract Class: When to use each.Mar 26, 2025 pm 04:11 PM

The article discusses the use of interfaces and abstract classes in PHP, focusing on when to use each. Interfaces define a contract without implementation, suitable for unrelated classes and multiple inheritance. Abstract classes provide common funct

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function