JQuery AJAX прогресс с пользовательским расчетом

Question

JQuery AJAX прогресс с пользовательским расчетом

Мне нужен совет относительно моего индикатора выполнения ajax при выполнении длинного сценария PHP, обрабатывающего изображения.
Я знаю, что есть много вопросов о стека и

Большинство примеров, которые я вижу, используют размер файла для расчета прогресса.
Но в моем случае я хотел бы рассчитать процент на основе images_treated / total_images,

Так что я до сих пор не могу сделать эту работу так, как хочу.

В JS ниже я прокомментировал неработающую функцию прогресса, которую я взял из другого вопроса и dataType: 'json' для тестов, но я бы предпочел, если я все еще могу использовать возвращение JSON.

Вопросы

Console.log () будет регистрироваться только один раз — когда закончится полный сценарий. Я делаю это неправильно?
Что я должен написать, чтобы заменить комментарий?
в некоторых ответах заголовки PHP устанавливаются в заголовок («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, После цикла сводная информация возвращается в JS через JSON в таком объекте, как {error: bool, message: string, ...} так что, если есть способ заставить прогресс работать без повторения, но установив переменную JSON, это было бы идеально!

Спасибо за помощь!

[РЕДАКТИРОВАТЬ], чтобы добавить детали контекста.

Я хочу использовать это на стороне администратора, в редакции статьи с WYSIWYG, у меня есть dropzone, которая заботится о нескольких загрузках моих изображений.

затем я вижу предварительный просмотр изображений, в то время как каждое изображение помещается во временную папку на сервере. Затем я могу удалить некоторые изображения, если это необходимо, и как только все изображения будут окончательными, я нажимаю кнопку, которая обработает их для изменения размера на 2 размера, и вставляю теги рисунков с помощью img в редактор WYSIWYG статьи.

0

ajax jquery php progress xmlhttprequest

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вау, я нашел решение!

Я счастлив открыть для себя новую вещь, которую я не знал о 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()!
Я мог копать таким образом благодаря этому хорошему посту:
https://stackoverflow.com/a/1430921/2012407

и я разместил здесь очень простой пример, чтобы ответить на другой вопрос: https://stackoverflow.com/a/38334673/2012407

Спасибо за вашу помощь в комментариях, ребята, это привело меня к этому решению. 😉

0