Forum PHP.pl > [JavaScript][PHP]Pasek postępu przy wysyłaniu danych ajaxem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][PHP]Pasek postępu przy wysyłaniu danych ajaxem

uki8877

10.05.2016, 17:14:30

Witam

Czy w połączeniu php z js istnieje opcja aby stworzyć taki pasek postępu, progressbar, który by na bieżąco wyświetlał w procentach ile zostało do końca ?

np przesylam 30 000 wynikow przy pomocy FOR i chcialbym aby mi taki progressbar pokazywal procentowo ile juz zostalo przeslane. Od 0 do 100%. Jest to wykonalne ?

goartur

10.05.2016, 19:48:53

Oczwyscie ze jest ale dane wtedy musisz wysalc za pomoca JS do PHP ajaxem. Wtedy mozna sprawdzac proces.

uki8877

10.05.2016, 20:00:08

Tyle że trzeba ajaxem to sam wiem :-)

Ale w jaki sposób można sprawdzać progres?

LowiczakPL

10.05.2016, 21:38:59

wiesz ile ma plik do przesłania to co chwilę odpytujesz ile się przesłało i

var procent = (e.loaded / e.total) * 100;

uki8877

10.05.2016, 21:56:23

Ale to nie chodzi o przesyłanie pliku, tylko np przesłanie 30 000 rekordów tekstowych do bazy danych. Kombinowałem ale nie mogę nic wymyślić, aby pasek i przesyłanie odbywało się w tym samym pliku

LowiczakPL

10.05.2016, 22:02:50

obojętnie czy 1 plik czy 30k to wiesz ile ważą i wzór masz wyżej

uki8877

10.05.2016, 22:05:05

Chyba się nie rozumiemy, załóżmy że losuje sobie 300000 liczb w pętli przy pomocy round()
I chciałbym z tego zrobić progressbar

rad11

11.05.2016, 06:43:05

index.php

[PHP] pobierz, plaintext 
<?php
// Start the session.
session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Progress Bar</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <style>
            #progress {
                width: 500px;
                border: 1px solid #aaa;
                height: 20px;
            }
            #progress .bar {
                background-color: #ccc;
                height: 20px;
            }
        </style>
    </head>
    <body>
        <div id="progress"></div>
        <div id="message"></div>
        <script>
            var timer;
 
            // The function to refresh the progress bar.
            function refreshProgress() {
                // We use Ajax again to check the progress by calling the checker script.
                // Also pass the session id to read the file because the file which storing the progress is placed in a file per session.
                // If the call was success, display the progress bar.
                $.ajax({
                    url: "checker.php?file=<?php echo session_id() ?>",
                    success: function (data) {
                        $("#progress").html('<div class="bar" style="width:' + data.percent + '%"></div>');
                        $("#message").html(data.message).append("Procent: " + data.percent + "%");
 
                        // If the process is completed, we should stop the checking process.
                        if (data.percent == 100) {
                            window.clearInterval(timer);
                            timer = window.setInterval(completed, 1000);
                        }
                    }
                });
            }
 
            function completed() {
                $("#message").html("Completed");
                window.clearInterval(timer);
            }
 
            // When the document is ready
            $(document).ready(function () {
                // Trigger the process in web server.
                $.ajax({url: "process.php"});
                // Refresh the progress bar every 1 second.
                timer = window.setInterval(refreshProgress, 1000);
            });
        </script>
    </body>
</html>
[PHP] pobierz, plaintext

process.php

[PHP] pobierz, plaintext 
<?php
 
// Start the session.
session_start();
// The example total processes.
$total = 10000;
// The array for storing the progress.
$arr_content = array();
// Loop through process
for ($i = 1; $i <= $total; $i++) {
    // Calculate the percentatage.
    $percent = intval($i / $total * 100);
 
 
// Put the progress percentage and message to array.
    $arr_content['percent'] = $percent;
    $arr_content['message'] = $i . " row(s) processed.";
 
 
// Write the progress into file and serialize the PHP array into JSON format.
    // The file name is the session id.
    file_put_contents("tmp/" . session_id() . ".txt", json_encode($arr_content));
 
 
// Sleep one second so we can see the delay
//    sleep(1);
}
?>
[PHP] pobierz, plaintext

checker.php

[PHP] pobierz, plaintext 
<?php
 
// The file has JSON type.
header('Content-Type: application/json');
// Prepare the file name from the query string.
// Don't use session_start here. Otherwise this file will be only executed after the process.php execution is done.
$file = str_replace(".", "", $_GET['file']);
$file = "tmp/" . $file . ".txt";
// Make sure the file is exist.
if (file_exists($file)) {
    // Get the content and echo it.
    $text = file_get_contents($file);
    echo $text;
 
 
// Convert to JSON to read the status.
    $obj = json_decode($text);
    // If the process is finished, delete the file.
    if ($obj->percent == 100) {
        unlink($file);
    }
} else {
    echo json_encode(array("percent" => null, "message" => null));
}
?>
[PHP] pobierz, plaintext

Dodatkowo utwórz sobie folder tmp.

LowiczakPL

11.05.2016, 08:07:48

Cytat(uki8877 @ 10.05.2016, 23:05:05 )

Chyba się nie rozumiemy, załóżmy że losuje sobie 300000 liczb w pętli przy pomocy round()
I chciałbym z tego zrobić progressbar

Obojętnie czy to zadanie, liczba, czy waga pliku wszystko to jest jakaś jednostka,

wiesz ile jest jednostek i wiesz ile jest przesłane

mariolita

11.05.2016, 09:48:44

https://jsfiddle.net/ohenp1cu/

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.