jquery ajax进度与自定义计算 [英] jquery ajax progress with custom calculation

问题描述

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

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

• 显示长时间运行的 PHP 脚本的进度
• 或通过xhr查询ajax进度
• 或使用ajax请求秒更新进度条)

我看到的大多数示例都是使用文件大小来计算进度.但就我而言，我想根据 images_treatment/total_images 计算百分比.

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 images_treated / total_images.

所以我仍然无法按照我的意愿完成这项工作.

So I still can't make this work as I want.

在下面的 JS 中，我评论了我从另一个问题和 dataType: 'json' 中获取的不起作用的进度函数进行测试，但如果我仍然可以使用 JSON 返回，我更愿意.

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

问题

1. console.log() 只会记录一次 - 当完整的脚本完成时.我做错了吗?
2. 我应该写什么来替换评论?
3. 在某些答案中，PHP 标头设置为 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_treatment 和 $total_images.在循环之后，摘要通过 JSON 在一个对象中返回给 JS，例如 {error: bool, message: string, ...} 所以如果有一种方法可以在不回显的情况下使进度正常工作，但是设置一个完美的 JSON 变量！

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

感谢您的帮助！

添加上下文详细信息.

to add context details.

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

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.

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

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.

推荐答案

哇，我找到了解决方案！

Waw I found a solution!

我很高兴发现我不了解 PHP 的新事物，并与同样不了解的人分享(在下面的第 3 步中)！

I am happy to discover that new thing I did not know about PHP and share with people who also don't know (in step 3 bellow)!

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

@riccardo was right talking about socket - which I don't know so well - but I did not need to go that far.

所以在我能够更接近我的目标之前，我有很多事情要解决.

So I had multiple things to solve in my case before being able to get closer of my goal.

1. 不使用 xhr.addEventListener("progress"...，而是在计时器中进行第二次 ajax 调用:它的资源消耗也会更轻.

1. not using xhr.addEventListener("progress"... but a second ajax call in a timer: it will also be lighter-weight in resource consumption.

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

rather than using a timer like setInterval or setTimeout - as requests are async it may come in unwanted order - use a recursive call in callback of first call like:

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()!由于这篇好文章，我可以用这种方式挖掘:https://stackoverflow.com/a/1430921/2012407

我在这里发布了一个非常简单的例子来回答另一个问题:https://stackoverflow.com/a/38334673/2012407

and I posted a very simple example here to reply to another question: https://stackoverflow.com/a/38334673/2012407

感谢您在评论中的所有帮助，这让我找到了这个解决方案.;)

Thank you for all your help in comments guys, it led me to this solution. ;)

这篇关于jquery ajax进度与自定义计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！