jquery ajax progress with custom calculation
<p>I need advice on my ajax progress bar while executing a long PHP script treating pictures.
I know there are plenty of questions on stackoverflow already like</p>

<ul>
<li><a href="https://stackoverflow.com/questions/7049303/show-progress-for-php-long-script">Show progress for long running PHP script</a></li>
<li>or <a href="https://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr">JQuery ajax progress via xhr</a></li>
<li>or <a href="https://stackoverflow.com/questions/19139613/update-progress-bar-using-ajax-request-seconds">update progress bar using ajax request seconds</a>)</li>
</ul>

<p>Most of the examples I see are using the file size to calculate the progress.
 But in my case I would like to calculate percentage based on <code>images_treated / total_images</code>. </p>

<p>So I still can't make this work as I want.</p>

<p>In JS bellow I commented the not working progress function I took from another question and <code>dataType: 'json'</code> for tests but I would prefer if I can still use a JSON return.</p>

<p><strong>Questions</strong></p>

<ol>
<li>The console.log() will only log once - when the full script is done. Am I doing it wrong?</li>
<li>What should I write to replace the comment?</li>
<li>in some answers, the PHP headers are set to header('Content-Type: application/octet-stream'); is it mandatory or just nicer?</li>
</ol>

<p><strong>Javascript:</strong></p>

<pre><code>        $.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;
            }
        });
</code></pre>

<p>My PHP is quite big so I just explain quickly: in the loop on pics I have variables <code>$images_treated</code> and <code>$total_images</code>. After the loop, a summary is returned to JS via JSON in an object like <code>{error: bool, message: string, ...}</code> so if there is a way to make the progress work without echoing but setting a JSON variable that would be perfect!</p>

<p>Thank you for your help!</p>

<p>[EDIT] to add context details.</p>

<p>I want to use this in an admin side, in an article edition with a WYSIWYG, I have dropzone taking care of my multiple images uploads.</p>

<p>then I see the preview of images while each image is put in temp folder on server. I can then remove some images if needed and once all images are definitive, i click a button that will process them for resizing 2 sizes and inject figure tags with img in the article WYSIWYG editor.</p>