Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][PHP]Pasek postępu przy wysyłaniu danych ajaxem
uki8877
post 10.05.2016, 17:14:30
Post #1





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 27.03.2016

Ostrzeżenie: (0%)
-----


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 ?
Go to the top of the page
+Quote Post
goartur
post 10.05.2016, 19:48:53
Post #2





Grupa: Zarejestrowani
Postów: 233
Pomógł: 27
Dołączył: 19.10.2014

Ostrzeżenie: (0%)
-----


Oczwyscie ze jest ale dane wtedy musisz wysalc za pomoca JS do PHP ajaxem. Wtedy mozna sprawdzac proces.
Go to the top of the page
+Quote Post
uki8877
post 10.05.2016, 20:00:08
Post #3





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 27.03.2016

Ostrzeżenie: (0%)
-----


Tyle że trzeba ajaxem to sam wiem :-)

Ale w jaki sposób można sprawdzać progres?
Go to the top of the page
+Quote Post
LowiczakPL
post 10.05.2016, 21:38:59
Post #4





Grupa: Zarejestrowani
Postów: 531
Pomógł: 55
Dołączył: 3.01.2016
Skąd: Łowicz

Ostrzeżenie: (0%)
-----


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

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


--------------------
Szukam zleceń Symfony, Laravel, Back-End, Front-End, PHP, MySQL ...
Go to the top of the page
+Quote Post
uki8877
post 10.05.2016, 21:56:23
Post #5





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 27.03.2016

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
LowiczakPL
post 10.05.2016, 22:02:50
Post #6





Grupa: Zarejestrowani
Postów: 531
Pomógł: 55
Dołączył: 3.01.2016
Skąd: Łowicz

Ostrzeżenie: (0%)
-----


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


--------------------
Szukam zleceń Symfony, Laravel, Back-End, Front-End, PHP, MySQL ...
Go to the top of the page
+Quote Post
uki8877
post 10.05.2016, 22:05:05
Post #7





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 27.03.2016

Ostrzeżenie: (0%)
-----


Chyba się nie rozumiemy, załóżmy że losuje sobie 300000 liczb w pętli przy pomocy round()
I chciałbym z tego zrobić progressbar
Go to the top of the page
+Quote Post
rad11
post 11.05.2016, 06:43:05
Post #8





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


index.php
  1. <?php
  2. // Start the session.
  3. ?>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <title>Progress Bar</title>
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  9. <style>
  10. #progress {
  11. width: 500px;
  12. border: 1px solid #aaa;
  13. height: 20px;
  14. }
  15. #progress .bar {
  16. background-color: #ccc;
  17. height: 20px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="progress"></div>
  23. <div id="message"></div>
  24. <script>
  25. var timer;
  26.  
  27. // The function to refresh the progress bar.
  28. function refreshProgress() {
  29. // We use Ajax again to check the progress by calling the checker script.
  30. // Also pass the session id to read the file because the file which storing the progress is placed in a file per session.
  31. // If the call was success, display the progress bar.
  32. $.ajax({
  33. url: "checker.php?file=<?php echo session_id() ?>",
  34. success: function (data) {
  35. $("#progress").html('<div class="bar" style="width:' + data.percent + '%"></div>');
  36. $("#message").html(data.message).append("Procent: " + data.percent + "%");
  37.  
  38. // If the process is completed, we should stop the checking process.
  39. if (data.percent == 100) {
  40. window.clearInterval(timer);
  41. timer = window.setInterval(completed, 1000);
  42. }
  43. }
  44. });
  45. }
  46.  
  47. function completed() {
  48. $("#message").html("Completed");
  49. window.clearInterval(timer);
  50. }
  51.  
  52. // When the document is ready
  53. $(document).ready(function () {
  54. // Trigger the process in web server.
  55. $.ajax({url: "process.php"});
  56. // Refresh the progress bar every 1 second.
  57. timer = window.setInterval(refreshProgress, 1000);
  58. });
  59. </script>
  60. </body>
  61. </html>


process.php

  1. <?php
  2.  
  3. // Start the session.
  4. // The example total processes.
  5. $total = 10000;
  6. // The array for storing the progress.
  7. $arr_content = array();
  8. // Loop through process
  9. for ($i = 1; $i <= $total; $i++) {
  10. // Calculate the percentatage.
  11. $percent = intval($i / $total * 100);
  12.  
  13.  
  14. // Put the progress percentage and message to array.
  15. $arr_content['percent'] = $percent;
  16. $arr_content['message'] = $i . " row(s) processed.";
  17.  
  18.  
  19. // Write the progress into file and serialize the PHP array into JSON format.
  20. // The file name is the session id.
  21. file_put_contents("tmp/" . session_id() . ".txt", json_encode($arr_content));
  22.  
  23.  
  24. // Sleep one second so we can see the delay
  25. // sleep(1);
  26. }
  27. ?>


checker.php

  1. <?php
  2.  
  3. // The file has JSON type.
  4. header('Content-Type: application/json');
  5. // Prepare the file name from the query string.
  6. // Don't use session_start here. Otherwise this file will be only executed after the process.php execution is done.
  7. $file = str_replace(".", "", $_GET['file']);
  8. $file = "tmp/" . $file . ".txt";
  9. // Make sure the file is exist.
  10. if (file_exists($file)) {
  11. // Get the content and echo it.
  12. $text = file_get_contents($file);
  13. echo $text;
  14.  
  15.  
  16. // Convert to JSON to read the status.
  17. $obj = json_decode($text);
  18. // If the process is finished, delete the file.
  19. if ($obj->percent == 100) {
  20. unlink($file);
  21. }
  22. } else {
  23. echo json_encode(array("percent" => null, "message" => null));
  24. }
  25. ?>


Dodatkowo utwórz sobie folder tmp.

Ten post edytował rad11 11.05.2016, 07:10:07
Go to the top of the page
+Quote Post
LowiczakPL
post 11.05.2016, 08:07:48
Post #9





Grupa: Zarejestrowani
Postów: 531
Pomógł: 55
Dołączył: 3.01.2016
Skąd: Łowicz

Ostrzeżenie: (0%)
-----


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


--------------------
Szukam zleceń Symfony, Laravel, Back-End, Front-End, PHP, MySQL ...
Go to the top of the page
+Quote Post
mariolita
post 11.05.2016, 09:48:44
Post #10





Grupa: Zarejestrowani
Postów: 116
Pomógł: 10
Dołączył: 24.04.2015

Ostrzeżenie: (0%)
-----


https://jsfiddle.net/ohenp1cu/
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 19:46