jquery ajax 自定义计算的进展

Question

我在执行处理图片的长 PHP 脚本时需要有关 ajax 进度条的建议。我知道已经有很多关于 Whosebug 的问题

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

我看到的大部分例子都是用文件大小来计算进度的。但就我而言，我想根据 images_treated / total_images 计算百分比。

所以我还是没能如愿以偿。

在 JS 波纹管中，我评论了我从另一个问题和 dataType: 'json' 中获取的无效进度函数用于测试，但我更希望我仍然可以使用 JSON return。

问题

console.log() 只会记录一次 - 当完整的脚本完成时。我做错了吗？
我应该写什么来代替评论？
在某些答案中，PHP header 设置为 header('Content-Type: application/octet-stream')；它是强制性的还是更好？

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;
            }
        });

我的 PHP 很大，所以我快速解释一下：在图片循环中我有变量 $images_treated 和 $total_images。在循环之后，摘要通过 JSON 以 object 形式 return 编辑到 JS，例如 {error: bool, message: string, ...} 所以如果有一种方法可以在不回显但设置 a 的情况下使进度工作JSON 完美的变量！

感谢您的帮助！

[编辑] 添加上下文详细信息。

我想在管理方面使用它，在具有所见即所得的文章版本中，我有 dropzone 来处理我的多张图片上传。

然后我看到图像的预览，同时每张图像都放在服务器上的临时文件夹中。然后我可以根据需要删除一些图像，一旦所有图像都是确定的，我单击一个按钮来处理它们以调整 2 种尺寸，并在文章所见即所得编辑器中注入带有 img 的图形标签。

Answer 1

哇，我找到了解决办法！

我很高兴发现我不知道的新事物 PHP 并与同样不知道的人分享（在下面的第 3 步中）！

@riccardo 谈论套接字是正确的——我不太了解——但我不需要走那么远。

因此，在接近我的目标之前，我有很多事情需要解决。

不使用 xhr.addEventListener("progress"...，而是在计时器中调用第二个 ajax：它在资源消耗方面也会更轻。

而不是使用像 setInterval 或 setTimeout 这样的计时器——因为请求是异步的，它可能以不需要的顺序出现——在第一次调用的回调中使用递归调用，例如：

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

        if (progress < 100) trackProgress();
    });
}

然后意识到我的第二个脚本调用仍然被第一个脚本延迟运行？是的。所以这里的关键是session_write_close()！由于这个好 post，我可以用这种方式挖掘：

我post在这里举了一个非常简单的例子来回答另一个问题：

感谢你们在评论中提供的所有帮助，这让我找到了这个解决方案。 ;)

jquery ajax 自定义计算的进展

jquery ajax progress with custom calculation

php

jquery

ajax

xmlhttprequest

progress