kostenloser Webspace werbefrei: lima-city


[PHP] Fortschritt einer foreach-Schleife darstellen

lima-cityForumProgrammiersprachenPHP, MySQL & .htaccess

  1. Autor dieses Themas

    biberiusmero

    Kostenloser Webspace von biberiusmero

    biberiusmero hat kostenlosen Webspace.

    Hallo zusammen,

    ich arbeite momentan an einem ref="/tag/projekt">Projekt, bei dem der Nutzer durch Klick auf einen Button eine foreach-Schleife auslöst, die Thumbnails von Bildern auf dem Server erstellt.
    Da das ein wenig dauert, wäre es schön, den Fortschritt mit einer progressBar darzustellen. Geht das evtl. mit AJAX wie bei Fileuploads?

    Vielen Dank im Voraus

    biberiusmero
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Ich würde dir da eher raten pro Bild einen Aufruf zu starten, das macht es dir mit Ajax auch recht einfach.
    Bei einem Aufruf kannst du da ganz schnell an Scriptlimits stoßen.
  4. Autor dieses Themas

    biberiusmero

    Kostenloser Webspace von biberiusmero

    biberiusmero hat kostenlosen Webspace.

    OK, ich hab jetzt eine PHP-Datei, die per POST den Dateinamen einer Bilddatei empfängt und dann dazu das Thumbnail erstellt:
    <?php
    $file_directory = '../files';
    $thumbnail_directory = '../image-thumbnails';
    
    if(isset($_POST["thumbnailer-file"]))
    {
        $thumbnailer_file = $file_directory . '/' . $_POST["thumbnailer-file"];
        if(file_exists($thumbnailer_file))
        {
            $imagesize = getimagesize($thumbnailer_file);
            $imagetype = $imagesize[2];
            switch($imagetype)
            {
                case 1: //GIF
                    $image = @imagecreatefromgif($thumbnailer_file);
                    $is_supported_image = TRUE;
                    break;
                case 2: //JPEG
                    $image = @imagecreatefromjpeg($thumbnailer_file);
                    $is_supported_image = TRUE;
                    break;
                case 3: //PNG
                    $image = @imagecreatefrompng($thumbnailer_file);
                    $is_supported_image = TRUE;
                    break;
                default:
                    $is_supported_image = FALSE;
            }
            if($is_supported_image)
            {
                $res = CreateThumbnail(...);
                if($res == 'created')
                {
                    echo 'success';
                }
                else
                {
                    echo 'fail';
                }
            }
        }
    }
    function CreateThumbnail(...)
    {
        ...
    }
    ?>

    Diese soll dann von JavaScript für jedes Bild neu aufgerufen werden und zeitgleich soll der Fortschritt dargestellt bzw. aktualisiert werden. Die Thumbnails werden zwar erstellt, aber das mit dem Fortschritt klappt noch nicht.
    function createThumbnails() {
        //PHP gibt hier ein Array zurück, in dem die Dateinamen der Bilder stehen, von denen ein Thumbnail erstellt werden soll
        var thumbnailerFiles = <?php echo json_encode(GetThumbnailerImages()); ?>;
        var percent = 0;
        if(thumbnailerFiles.length != 0) {
           var percentIncreasePerImage = Math.round((1 / thumbnailerFiles.length) * 100);
        }
        for(var i = 0; i < thumbnailerFiles.length; i++) {
            var formdata = new FormData();
            formdata.append("thumbnailer-file", thumbnailerFiles[i]);
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "thumbnailer.php");
            ajax.send(formdata);
            percent += percentIncreasePerImage;
    
            //hier wir die progressBar verändert
            document.getElementById("progressBar").value = percent;
        }
        document.getElementById("progressBar").value = 0;
    }

    Muss man evtl. die progressBar an einer anderen Stelle verändern oder funktioniert das so gar nicht?

    MfG biberiusmero
  5. Dein Javascript sendet im Moment alle Requests direkt nacheinander und überflutet den Server mit Anfragen. Die Antworten des Servers auf all die Anfragen werden am Ende einfach ignoriert.
    Schicke besser erstmal nur einen Request und warte auf die Antwort. Ist die Antwort nicht 'success' kannst du noch einen Hinweis ausgeben. In jedem Fall wird erst danach dann der nächste Request gesendet.

    function createThumbnails() {
        //PHP gibt hier ein Array zurück, in dem die Dateinamen der Bilder stehen, von denen ein Thumbnail erstellt werden soll
        var thumbnailerFiles = <?php echo json_encode(GetThumbnailerImages()); ?>;
        var percent = 0;
        if(thumbnailerFiles.length != 0) {
           var percentIncreasePerImage = Math.round((1 / thumbnailerFiles.length) * 100);
        }
        // Bis hier hab ich alles stehen lassen.
    
        var createThumbnail=function(i) {
            var formdata = new FormData();
            formdata.append("thumbnailer-file", thumbnailerFiles[i]);
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange=function() {
                if (ajax.readyState == 4) {
                    var erfolg=(ajax.status==200 && ajax.responseText=='success');
                    if (!erfolg) {
                        // Gib einen Hinweis aus
                    }
    
                    percent += percentIncreasePerImage;
                    //hier wir die progressBar verändert
                    document.getElementById("progressBar").value = percent;
    
                    // Und der nächste Aufruf
                    i++;
                    if (i<thumbnailerFiles.length) {
                        createThumbnail(i);
                    }
                }
            }
            ajax.open("POST", "thumbnailer.php");
            ajax.send(formdata);
        }
        document.getElementById("progressBar").value = 0;
        createThumbnail(0);
    }


    Brauchst du innerhalb von Javascript noch eine Rückmeldung, wann alle Thumbnails fertig erstellt wurden? Dann erweitere ich dir das Programm, das sind praktisch nur zwei Zeilen mehr.
  6. Autor dieses Themas

    biberiusmero

    Kostenloser Webspace von biberiusmero

    biberiusmero hat kostenlosen Webspace.

    Hallo fuerderer,

    vielen Dank für deine Antwort, so hat's geklappt. Die Rückmeldung nach Fertigstellung wäre praktisch, dann könnte ich die progressBar dann wieder auf null setzen.

    MfG biberiusmero

    P. S.: Wie stellst du deinen Code dar? Gibt's da einen neuen Sytax-Highlighter von lima-city?
  7. biberiusmero schrieb:
    Die Rückmeldung nach Fertigstellung wäre praktisch, dann könnte ich die progressBar dann wieder auf null setzen
    Ok, dann bau ich das noch kurz um ...
    function createThumbnails(callback) {
        //PHP gibt hier ein Array zurück, in dem die Dateinamen der Bilder stehen, von denen ein Thumbnail erstellt werden soll
        var thumbnailerFiles = <?php echo json_encode(GetThumbnailerImages()); ?>;
        var percent = 0;
        if(thumbnailerFiles.length != 0) {
           var percentIncreasePerImage = Math.round((1 / thumbnailerFiles.length) * 100);
        }
        // Bis hier hab ich alles stehen lassen.
     
        var createThumbnail=function(i) {
            var formdata = new FormData();
            formdata.append("thumbnailer-file", thumbnailerFiles[i]);
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange=function() {
                if (ajax.readyState == 4) {
                    var erfolg=(ajax.status==200 && ajax.responseText=='success');
                    if (!erfolg) {
                        // Gib einen Hinweis aus
                    }
     
                    percent += percentIncreasePerImage;
                    //hier wir die progressBar verändert
                    document.getElementById("progressBar").value = percent;
     
                    // Und der nächste Aufruf
                    i++;
                    if (i<thumbnailerFiles.length) {
                        createThumbnail(i);
                    } else {
                        callback();
                    }
                }
            }
            ajax.open("POST", "thumbnailer.php");
            ajax.send(formdata);
        }
        document.getElementById("progressBar").value = 0;
        createThumbnail(0);
    }
    Jetzt musst du diese Funktion nur noch richtig aufrufen :biggrin::
    createThumbnails(function() {
        // Die Thumbnails sind jetzt alle erstellt.
    });

    biberiusmero schrieb:
    P. S.: Wie stellst du deinen Code dar? Gibt's da einen neuen Sytax-Highlighter von lima-city?
    Nein, neu ist er nicht. Aber es kennen ihn nicht alle. Auf dieser alten Hilfeseite von Lima-city ist erklärt, wie man ihn benutzen kann.
  8. Autor dieses Themas

    biberiusmero

    Kostenloser Webspace von biberiusmero

    biberiusmero hat kostenlosen Webspace.

    OK, vielen Dank für die schnelle Hilfe!

    MfG biberiusmero
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!