Ankündigung

Einklappen
Keine Ankündigung bisher.

progressbar mit jquery

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • progressbar mit jquery

    Hallo, kennt jemand ein gutes Tutorial wie man eine progressbar mittels jquery in php-scripte einbinden könnte.
    Ja, ich weiß per Google findet man viele Beispiele. Vielleicht kennt aber jemand ein gutes was auch für Anfänger
    geeignet ist. Danke

  • #2
    Zitat von dih Beitrag anzeigen
    eine progressbar mittels jquery in php-scripte einbinden könnte.
    geht nicht. jQuery läuft im Browser, PHP auf dem Server. Zwei komplett unabhängige Systeme.

    Kommentar


    • #3
      Zitat von Dormilich Beitrag anzeigen
      geht nicht. jQuery läuft im Browser, PHP auf dem Server. Zwei komplett unabhängige Systeme.
      PHP-Code:
      $value 50;
      echo 
      '<script>
      $(function() {    
      $( "#progressbar" ).progressbar({    
      value: '
      .$value.'    });    
      });    
      </script> '

      geht
      apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

      Kommentar


      • #4
        Und nativ?
        https://css-tricks.com/html5-progress-element/

        Kommentar


        • #5
          Ich hab zuhause auffer Platte sogar noch eine interaktive Progressbar (für Downloads oder Hintergrundtasks) rumfliegen. Ich guck mal ob ich das die Tage mal posten kann.
          Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

          Kommentar


          • #6
            Relativ simpel und einfach gehalten:
            http://lightningtgc.github.io/MProgress.js/

            Nutze ich selber auch desöfteren.
            Sieht aus wie z.B. bei Youtube.
            "Software is like Sex, it's best if it's free." - Linus Torvalds

            Kommentar


            • #7
              Also ich habe jetzt folgendes Bsp. gefunden:
              html:
              HTML-Code:
               <div id="progressbar"></div>
              js:
              Code:
              $(function(){
                              $("#progressbar").progressbar({  
                                  value: 0
                              });
                              function load() {
                                  $.ajax({
                                      url: './ajax.php?status='+$( "#progressbar" ).progressbar( "value" ),
                                      success: function(data) {
                                          ajax = eval('(' + data + ')');
                                          if(ajax!=false) {
                                              $("#progressbar").progressbar({
                                                  value: ajax.status
                                              });
                                              if(ajax.status!=100) {
                                                  load();
                                              }
                                          }
                                      }
                                  });
                              }
                              
                              load();
              });
              ajax.php
              PHP-Code:
              <?php
              $zufall 
              rand(1,3); // Zufällige länge der Aktion simulieren
              sleep($zufall); // Simulieren einer langen Aktion...

              $php_array['status'] = $_GET['status']+($zufall*3);

              if(
              $php_array['status'] > 100) {
                  
              $php_array['status'] = 100;
              }

              echo 
              json_encode($php_array);

              ?>
              Die ajax.php wird bei jedem Load-Vorgang ausgeführt. Mittels $zufall wird z.B. eine lange Datenbankabfrage simuliert.
              Mein Problem ist nun wie kann ich diese Fortschrittsanzeige in meinen Scripten nutzen... Ich habe eine index.php über
              diese wird ein Navigationsmenü aufgerufen. Bei Klick auf den jeweiligen Button wird dann jeweils ein anderes php-script
              inkludiert.
              Mein Ansatz wäre folgender: Da die Load-Funktion bei jedem Klick ausgeführt wird, müsste ich dieser irgendwie den Wert des
              geklickten Buttons mitgeben (z.B. Button1). Den Wert "Button1" wiederum übergebe ich dann auch der ajax.php und da erfolgt dann
              eine Abfrage welche php-Datei inkludiert wird. Wäre das so denkbar???

              Kommentar


              • #8
                Hier mein "Download with progressbar" script. Benötigt jquery (Pfad anpassen im HTML), und falls die Dateien nicht im webroot liegen, evtl. Anpassungen derselben.

                download.php erzeugt eine Testdatei für eine "id" und sendet diese in Teilen zum Browser. Mit jedem Teil der gesendet wird, wird eine Statusdatei auf dem Server aktualisiert und mit Informationen zum Downloadstatus beschrieben (JSON).
                Die Testdatei ist 1MB groß, der Download auf 20kb/s begrenzt.

                download_stats.php liefert den Inhalt der Statusdatei

                download.html, der JS part ist derjenige welche die Statusinfos sekündlich von Server abfragt und die Progressbar aktualisiert

                download.html
                Code:
                <!DOCTYPE HTML>
                <html>
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Download Status</title>
                <script type="text/javascript" src="/js/jquery.js"></script>
                
                <script type="text/javascript">
                $(document).ready(function(){
                });
                
                var intervalID = 0;
                var fileID = 0;
                function timerThread() {
                    if (fileID <= 0 || intervalID <= 0) return;
                    
                    $.ajax({
                      url: "download_stats.php?id="+fileID,
                      type: "get",
                      success: function(data) {
                        if (data) {
                            $('#status').html(
                              '<div style="width:100%;height:20px;background-color:white;border:1px solid silver;text-align:center;">'+
                              '<div style="width:'+(parseFloat(data.percent))+'%;heigth:20px;background-color:#ddddff;">&nbsp;</div>'+
                              '<div style="position:relative;clear:both;width:100%;height:20px;top:-19px;text-align:center;">'+data.percent+' %</div>'+
                              '</div>' +
                              '<div>' + data.text + '</div>' +
                              '<div>' + data.html + '</div>'           
                            ); 
                            //console.log(data);
                        }
                        if (data.percent && parseFloat(data.percent) > 99.99)
                          clearInterval(intervalID);
                      }
                    });    
                }
                
                </script>
                
                </head>
                <body>
                  
                  download with status 
                  
                    <a href="download.php?id=4711" onclick="fileID = 4711; intervalID = setInterval(timerThread, 1000);">click me to get a big file...</a>
                    <div id="status" style="width:500px;">status here...</div>
                </body>
                </html>
                download.php
                PHP-Code:
                <?php

                if (!isset($_GET['id'])) exit;

                // identify download. search it from database or something else
                $id intval($_GET['id']);

                // we emulate file download.. real big filedownload, just to see something...
                set_time_limit(0); // might take a while

                // some real big file
                $realBigFileSize 1024 1024

                // rest of Bytes to send and bytes already sent
                $bytesToSend $realBigFileSize;  
                $bytesAlreadySent 0;

                // chunk size 4kb (will be sent at a time)
                $chunkSize 4096;
                $chunksSent 0;

                // filename of the status file, that will be fetched from download_status
                $statusFile $id.'_status.txt';

                // control the download limit (0 to disable), in Byte/sec
                $dlLimit 20 1024// Byte/sec
                if ($chunkSize $dlLimit)
                    
                $chunkSize $dlLimit 2;


                // send client a file (we use $id as a filename here..)
                header('Content-Type: application/download'); 
                header('Content-Disposition: attachment; filename="'.$id.'"'); 
                header('Content-Length: '.$bytesToSend); 

                $startTime microtime(true);
                // start the transfer
                while ($bytesToSend 0) {
                    
                    
                $currTime microtime(true);

                    
                // limit download rate...
                    
                if ($dlLimit && $bytesAlreadySent / ($currTime $startTime) > $dlLimit)
                        continue;
                    
                    
                // be sure, there is enough data to send
                    
                if ($bytesToSend $chunkSize)
                        
                $chunkSize $bytesToSend;
                    
                    
                // make some data:
                    
                $char chrrand3257) );
                    
                $data str_repeat($char$chunkSize 1);
                    
                $data .= "\n";
                    
                    
                // percentage
                    
                $all $bytesToSend $bytesAlreadySent;
                    
                $one 100. $all;
                    
                $percentage sprintf("%2.2f",($bytesAlreadySent $one));
                    
                    
                // adjust info
                    
                $bytesToSend -= $chunkSize;
                    
                $bytesAlreadySent += $chunkSize;
                    
                $chunksSent++;

                    
                $response = array();
                    
                $response['percent'] = $percentage;
                    
                // help a little bit with reaching exactly 100%
                    
                if ($bytesAlreadySent >= $realBigFileSize)
                        
                $response['percent'] = '100.00';
                    
                    
                // download rate: bytes already sent / time already spent
                    
                $dlRate = (($bytesAlreadySent)/($currTime $startTime))/1000;
                    
                $dlRateReal = (($bytesAlreadySent)/($currTime $startTime))/1024;

                    
                // calculate estimated rest time for download (with current download rate)
                    
                $dlRateByte = (($bytesAlreadySent)/($currTime $startTime));
                    
                $secRemaining $bytesToSend $dlRateByte

                    
                // session might be blocked. status reports go through a file
                    
                $response['text'] = 
                    
                'File-ID: '$id' (filesize: '.number_format($realBigFileSize/10240',''.').' KB, chunksize: '$chunkSize' byte)<br>'.
                    
                'remaining: 'number_format($bytesToSend/10240',''.'). ' KB of '.number_format($realBigFileSize/10240',''.').' KB<br>'.    
                    
                'chunk no.: ' $chunksSent' ('.number_format($bytesAlreadySent/10240',''.').' KB sent)<br>'.
                    
                'starttime: '.date('d.m.Y H:i:s'$startTime).'<br>'.
                    
                'timestamp: '.date('d.m.Y H:i:s'$currTime).'<br>'.
                    
                'download time: '.date('i:s'$currTime $startTime).'<br>'.
                    
                'est. rest time: '.date('i:s'$secRemaining).'<br>'.
                    
                'download rate: '.number_format($dlRate0',''.').' KB/sec<br>'.
                    
                'download rate (real): '.number_format($dlRateReal0',''.').' KB/sec<br>';
                    
                    if (
                $dlLimit 0
                        
                $response['text'] .= 'download limit: '.number_format($dlLimit/10240',''.').' KB/sec<br>';
                        
                    
                $response['html'] =
                    
                '<div style="width:400px;height:20px;background-color:white;border:1px solid silver;text-align:center;"><div style="width:'.((int)$response['percent'] *4).'px;heigth:18px;background-color:#ccffcc;">&nbsp;</div>'.
                    
                '<div style="position:relative;clear:both;width:400px;height:20px;top:-20px;text-align:center;">'.$response['percent'].'%</div></div>';
                           
                    
                file_put_contents($statusFilejson_encode($response));
                        
                    
                // actually sending the data
                    
                echo $data;
                        
                }
                download_stats.php
                PHP-Code:
                <?php

                if (!isset($_GET['id'])) die('no id');

                $id intval($_GET['id']);
                $file $id.'_status.txt';

                // be sure status file exists and is readable
                if (file_exists($file) && is_readable($file)) {
                    
                // read it
                    
                $status file_get_contents($file);
                    if (
                strlen($status) > 0) {
                        
                header('Content-Type: application/json');
                        echo 
                $status;

                        
                // delete status file on EOF
                        
                $obj json_decode($status);
                        if (
                $obj->percent 99.99
                            
                unlink($file);
                    }    
                }
                Das ganze sieht dann so aus:

                dl2.png

                (Anm.: Die zweite Progressbar wird serverseitig erstellt)
                Angehängte Dateien
                Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

                Kommentar


                • #9
                  Danke, werde ich mal ausprobieren

                  Kommentar


                  • #10
                    Zitat von BlackScorp Beitrag anzeigen

                    PHP-Code:
                    $value 50;
                    echo 
                    '<script>
                    $(function() {
                    $( "#progressbar" ).progressbar({
                    value: '
                    .$value.' });
                    });
                    </script> '

                    geht
                    Nach dem ich einige Sachen ausprobiert habe, z.B. auch dieses einfache Bsp. von BlackScorp muss ich sagen das es doch nicht so funktioniert wie ich es mir
                    vorgestellt habe. Ich möchte den aktuellen Status zurückgeben wo er sich gerade in der Abarbeitung des PHP-Scriptes befindet. z.B.

                    PHP-Code:
                       echo "Startwert bei 20";
                       
                    $value 20;
                       echo 
                    '<script>
                             $(function() {    
                             $( "#progressbar" ).progressbar({    
                             value: '
                    .$value.'    });    
                             });    
                             </script> '
                    ;   

                       echo 
                    "Es wird gearbeitet";
                     
                     
                    $i 0;
                     while (
                    $i 1000000000) {
                      
                    $i += 1// Berechnung simulieren
                     
                    }

                     
                    $value 80;
                       echo 
                    '<script>
                             $(function() {    
                             $( "#progressbar" ).progressbar({    
                             value: '
                    .$value.'    });    
                             });    
                             </script> '

                    Ich erhalte aber immer nur die 80 Prozent angezeigt. Das Script wird also immer erst komplett abgearbeitet, bevor die Darstellung der Fortschrittsanzeige aktualisert wird...

                    Kommentar


                    • #11
                      Logisch, PHP läuft ja am Server und JavaScript am Client. JavaScript beginnt erst dann mit der Arbeit, wenn PHP schon damit fertig ist.

                      Du müsstest asynchron arbeiten, Stichwort: AJAX

                      Kommentar


                      • #12
                        Ein Ansatz mit ajax hatte ich bereits gepostet. Bin dann aber nicht richtig weiter gekommen. Kannst du mir dazu was sagen?

                        Zitat von dih Beitrag anzeigen
                        Also ich habe jetzt folgendes Bsp. gefunden:
                        html:
                        HTML-Code:
                        <div id="progressbar"></div>
                        js:
                        Code:
                        $(function(){
                        $("#progressbar").progressbar({
                        value: 0
                        });
                        function load() {
                        $.ajax({
                        url: './ajax.php?status='+$( "#progressbar" ).progressbar( "value" ),
                        success: function(data) {
                        ajax = eval('(' + data + ')');
                        if(ajax!=false) {
                        $("#progressbar").progressbar({
                        value: ajax.status
                        });
                        if(ajax.status!=100) {
                        load();
                        }
                        }
                        }
                        });
                        }
                        
                        load();
                        });
                        ajax.php
                        PHP-Code:
                        <?php
                        $zufall 
                        rand(1,3); // Zufällige länge der Aktion simulieren
                        sleep($zufall); // Simulieren einer langen Aktion...

                        $php_array['status'] = $_GET['status']+($zufall*3);

                        if(
                        $php_array['status'] > 100) {
                        $php_array['status'] = 100;
                        }

                        echo 
                        json_encode($php_array);

                        ?>
                        Die ajax.php wird bei jedem Load-Vorgang ausgeführt. Mittels $zufall wird z.B. eine lange Datenbankabfrage simuliert.
                        Mein Problem ist nun wie kann ich diese Fortschrittsanzeige in meinen Scripten nutzen... Ich habe eine index.php über
                        diese wird ein Navigationsmenü aufgerufen. Bei Klick auf den jeweiligen Button wird dann jeweils ein anderes php-script
                        inkludiert.
                        Mein Ansatz wäre folgender: Da die Load-Funktion bei jedem Klick ausgeführt wird, müsste ich dieser irgendwie den Wert des
                        geklickten Buttons mitgeben (z.B. Button1). Den Wert "Button1" wiederum übergebe ich dann auch der ajax.php und da erfolgt dann
                        eine Abfrage welche php-Datei inkludiert wird. Wäre das so denkbar???

                        Kommentar


                        • #13
                          Du bräuchtest zwei PHP-Scripts bzw. Endpoints. Einer, der die Aufgabe erledigt, die lange dauert, und ein anderer, der den aktuellen Status zurück gibt. Und diesen kannst du per AJAX abfragen.

                          eval() ist übrigens Käse. Bitte verwende sowas nicht. Es gibt keinen Grund dazu.

                          Kommentar

                          Lädt...
                          X