[Erledigt] Bild ausgeben solange das Script läuft

[favo]

Mein Problem ist befasst sich nicht damit, dass mein Script nicht läuft, sondern vielmehr mit einem Nice2Have, das ich gerne realisieren würde, bisher aber noch keine Lösung gefunden habe.

Aktuelle Situation:
1. Datei "produkt_add.php":
Diese Datei enthält mein Formular, in dem Daten eingepflegt werden können und ein Bild mitgegeben werden kann.

2. Datei "produkt_add_db.php":
Diese Datei übernimmt die Eingabevalidierung und prüft, ob eine Bild mitgegeben wurde. Und genau hier setzt mein Problem an.

Wenn ein Bild mitgegeben wurde, hole ich es aus dem tmp-Verzeichnis und übergebe den Pfad an meine Resize-Klasse die mir das Bild cropped. Je nach Größe des Bildes kann dieser Vorgang etwas dauern. Mein Wunsch ist es nun, während das Script läuft, einen typische loader.gif Datei anzuzeigen. Am Ende der Datei wartet allerdings eine Header("Location:"); die mich zurück zum Formular schickt, wenn alles i.O. ist.

Hier der Codeausschnitt, der das Resizing übernimmt:
...

//Pfüfen ob Bild hochgeladen
    if(isset($_FILES['datei']) AND !empty($_FILES['datei'])){
        // Resize Klasse laden
        include 'resize-class.php';
        // datei von tmp in ordner verschieben
        $dateineu = "images/produkte/".$art_nr.".jpg";
        move_uploaded_file($_FILES['datei']['tmp_name'], $dateineu);
        // -------------------------- Bild auf richtige Größe bringen (Volle Größe)
        // Bild an Klasse übergeben
        $resizeObj = new resize($dateineu);
        // Resize Einstellungen
        $resizeObj -> resizeImage(300, 200, 'crop');
        // Geändertes Bild speichern
        $resizeObj -> saveImage('images/produkte/'.$art_nr.'.jpg', 100);
        // -------------------------- Bild auf richtige Größe bringen (Preview Größe)
        // Bild an Klasse übergeben
        $resizeObj = new resize($dateineu);
        // Resize Einstellungen
        $resizeObj -> resizeImage(75, 50, 'crop');
        // Geändertes Bild speichern
        $resizeObj -> saveImage('images/produkte/'.$art_nr.'k.jpg', 100);
    } 

...

Dachte an sowas wie eine While Schleife oder so, weiß aber nicht wie ich die Ausgabe einer Bilddatei realisieren soll, wenn am Ende des Scripts ein Header Event wartet.

Vielen dank im Voraus für eure Mühe

[mimomamu]

Leite auf eine Warte-Seite weiter. Das Script, das diese Warte-Seite generiert schickt sie explizit zum Browser (mit [MAN]flush[/MAN]). Dann bearbeitet das Script das Bild. Wenn die Bearbeitung abgeschlossen ist, dann schickt das Script JavaScript-Code an den Browser, der auf die Ergebnisseite weiterleitet.

Den Hack mit dem JavaScript-Code kannst du dir ersparen wenn du einen Daemon schreibst, der die Bilder bearbeitet. Dann kannst du einen Meta-Refresh in die Warteseite einbauen (oder per AJAX nachfragen) und dadurch prüfen ob die Bearbeitung abgeschlossen ist.

[fab]

Noch ein alternativer Ansatz wäre, mittels Content-type: multipart/x-mixed-replace erst die Warteseite anzuzeigen und dann das Formular.

Vorteil: kommt ohne JavaScript aus
Nachteil: keine echte Weiterleitung, Workarounds für IE notwendig

[Gast]

Wie wäre es mit nem unsichtbaren iframe als Target für den upload? Onsubmit oder onlick auf den submitbutton (wobei dann abschicken per "enter" ein Problem wäre) kannst du das Bild bzw. den Layer in dem sich das Bild befindet anzeigen lassen und nach Abschluß des uploads wird per parent.window.document.location.href auf eine Zielseite weitergeleitet. Kannst das iframe auch dynamisch per JS erzeugen und damit deine Standard-JS-Funktion für den Fall basteln.

[favo]

Danke für die Vorschläge. Kann jedem was Gutes abgewinnen, mal sehen wie ich mich letztendlich entscheide!

[webdecker]

Es heißt zwar schon, es sei erledigt und oben wurde was von JavaScript-Hack erzählt, aber trotzdem noch mal eine (übliche?) Idee. Warum nicht bei Submit per JavaScript ein loader.gif anzeigen (bzw. sichtbar machen) - das verschwindet dann, wenn die neue Seite fertig ist.

HTML:

    <div id="loader" style="position: fixed; top: 40%; left: 36%; text-align: center; display: none;">
    	<img src="/loader.gif" alt="" /><br />
    	<div style="margin-top: 20px; padding-left: 10px;">Bitte warten</div>
    </div>

JavaScript (auf Basis von mootools, siehe http://mootools.net/):

window.addEvent('domready', function(){
    addLoaderEvents();
});
addLoaderEvents = function() {
    if ($(document).getElements('form')) {
        $(document).getElements('form').addEvent('submit', function(event) {
            if (!this.target) {
                showLoader();
            }
        });
    }
}
showLoader = function () {
        var wrapper = $(document).getElement('div#wrapper');
        wrapper.setStyle('opacity', 0);
        $(document).getElement('div#loader').setStyle('display', 'block');
}

Dieser Code zeigt einfach bei jedem Form-Submit den Loader.

[ChrisB]

Warum nicht bei Submit per JavaScript ein loader.gif anzeigen

Weil das im IE idR. problematisch ist, sofern es animiert sein soll - der hat(te) nämlich die Eigenart, sämtliche Animationen auf der Seite zu stoppen, sobald eine neue Ressource angefordert wird.