jquery ajax Fortschritt mit benutzerdefinierten Berechnung

Question

Ich brauche Beratung auf meinem Ajax Fortschrittsbalken während der Ausführung eines langen PHP-Skriptes Bilder behandeln. Ich weiß, dass es bereits viele Fragen auf Stackoverflow sind wie

• Show progress for long running PHP script
• oder JQuery ajax progress via xhr
• oder update progress bar using ajax request seconds)

Die meisten Beispiele Ich sehe die Dateigröße verwenden die zur Berechnung Fortschritt. Aber in meinem Fall möchte ich Prozent basierend auf images_treated/total_images berechnen.

So kann ich immer noch nicht so arbeiten, wie ich will.

In JS unten habe ich die nicht funktionierende Fortschrittsfunktion kommentiert, die ich von einer anderen Frage und dataType: 'json' für Tests genommen habe, aber ich würde bevorzugen, wenn ich noch eine JSON Rückkehr verwenden kann.

Fragen

1. Die console.log() wird nur einmal anmelden - wenn das vollständige Skript ausgeführt wird. Mache ich es falsch?
2. Was soll ich schreiben, um den Kommentar zu ersetzen?
3. In einigen Antworten sind die PHP-Header auf Header gesetzt ('Content-Type: application/octet-stream'); ist es obligatorisch oder einfach schöner?

Javascript:

 $.ajax(
     { 
      type: 'GET', 
      // dataType: 'json', 
      url: formAction, 
      data: 'addImagesToArticle', 
      cache: false, 
      xhr: function() 
      { 
       var xhr = new window.XMLHttpRequest(); 

       // Download progress. 
       xhr.addEventListener("progress", function(e) 
       { 
        console.log(e); 
        // I saw this piece of code from another question it is supposed to work... Maybe my PHP? 
        /*var lines = e.currentTarget.response.split("\n"); 
        var progress = lines.length ? lines[lines.length-1] : 0; 

        $('#progress').text(progress);*/ 
       }, false); 
       return xhr; 
      } 
     }); 

Mein PHP ist ziemlich groß, so einfach schnell ich erklären: in der Schleife auf Bilder, die ich Variablen $images_treated und $total_images. Nach der Schleife wird eine Zusammenfassung über JSON in einem Objekt wie {error: bool, message: string, ...} an JS zurückgegeben, wenn es einen Weg gibt, den Fortschritt ohne Echo zu machen, aber eine JSON-Variable zu setzen, die perfekt wäre!

Vielen Dank für Ihre Hilfe!

[EDIT] um Kontextdetails hinzuzufügen.

Ich möchte dies in einer Admin-Seite verwenden, in einer Artikelausgabe mit einem WYSIWYG, ich habe Dropzone kümmert sich um meine mehrere Bilder Uploads.

dann sehe ich die Vorschau der Bilder, während jedes Bild in Temp-Ordner auf dem Server abgelegt wird. Ich kann dann einige Bilder entfernen, wenn nötig und sobald alle Bilder endgültig sind, klicke ich auf eine Schaltfläche, die sie für die Größenänderung von 2 Größen verarbeiten und Figur-Tags mit img in den Artikel WYSIWYG Editor injizieren.

Answer 1

Waw ich fand eine Lösung!

Ich freue mich zu entdecken, dass neue Sache, die ich nicht über PHP wusste und mit Leuten teilen, die auch nicht wissen (in Schritt 3 unten)!

@riccardo hatte Recht, über Steckdose zu sprechen - die ich nicht so gut kenne - aber ich musste nicht so weit gehen.

So hatte ich in meinem Fall mehrere Dinge zu lösen, bevor ich meinem Ziel näher kommen konnte.

1. nicht mit xhr.addEventListener("progress"... aber einem zweiten Ajax-Aufruf in einem Timer: es wird auch leichterer in dem Ressourcenverbrauch sein.

2. anstatt einen Timer wie setInterval oder setTimeout mit - wie Anträge sind async es in unerwünschter Reihenfolge kommen kann - einen rekursiven Aufruf in Rückruf von ersten Anruf wie verwenden:

   function trackProgress() 
   { 
       $.getJSON('create-a-new-page.html', 'ajaxTrackProgress=1', function(response) 
       { 
        var progress = response.progress; 
        $('#progress').text(progress); 
   
        if (progress < 100) trackProgress(); 
       }); 
   } 
   

3. erkennt dann, dass meine zweiten Skriptaufruf wird verzögert, indem das erste Skript noch ausgeführt wird? Ja. Also der Schlüssel hier ist session_write_close()! https://stackoverflow.com/a/1430921/2012407

und ich gepostet ein sehr einfaches Beispiel hier, um die Antwort auf eine andere Frage: https://stackoverflow.com/a/38334673/2012407

Vielen Dank für Ihre Hilfe in den Kommentaren Jungs ich auf diese Weise dank dieser guten Beitrag graben konnte Es hat mich zu dieser Lösung geführt. ;)