jQuery ajax進捗状況カスタム計算

Question

写真を扱う長いPHPスクリプトを実行しているときに、私のAjaxプログレスバーに関するアドバイスが必要です。 私は私が見るほとんどの例では、計算にファイルサイズを使用している

）の質問の多くは、すでに

• Show progress for long running PHP script
• またはJQuery ajax progress via xhr
• またはupdate progress bar using ajax request secondsようstackoverflowの上がいることを知っています進捗。 私の場合、images_treated/total_imagesに基づいてパーセンテージを計算したいと思います。

  だから私は今でも私が望むようにこの仕事をすることはできません。

  JSでは、私は別の質問から取った作業の進捗関数ではなく、dataType: 'json'のテストではコメントしましたが、私はまだJSONリターンを使用できるのが好きです。

  質問

  1. にconsole.log（）一度だけ記録します - 完全なスクリプトが実行されたとき。私はそれを間違っているのですか？
  2. コメントを置き換えるにはどうすればよいですか？
  3. いくつかの回答では、PHPヘッダはheader（ 'Content-Type：application/octet-stream'）に設定されています。それは必須か、それともちょっといいですか？

  Javascriptを：写真上のループで、私は変数を持ってい$images_treatedと$total_images：

   $.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はので、私はちょうどすぐに説明かなり大きいです。ループの後に、{error: bool, message: string, ...}のようなオブジェクトにJSONを介してJSに要約が返されます。そのため、エコーすることなく進行状況を確認する方法があれば完璧なJSON変数を設定することができます。

  ありがとうございました！

  [EDIT]文脈の詳細を追加します。

  管理者側でこれを使用したいと思っています.WYSIWYGの記事版では、私は複数の画像をアップロードするためにdropzoneを持っています。

  次に、各画像がサーバーの一時フォルダに置かれている間に、画像のプレビューが表示されます。次に、必要に応じていくつかの画像を削除して、すべての画像が確定したら、WYSIWYGエディタの記事で2つのサイズのサイズを変更し、Figureタグをimgで挿入するボタンをクリックします。

Answer 1

Waw解決策を見つけました。

私がPHPについて知りませんでした新しいことを発見して、喜んで知られていない人々と共有します（ステップ3で）！

@riccardoはソケットについて話していました。私はこれほどよく分かりませんが、それほど遠くに行く必要はありませんでした。

私は私の場合、私の目標を近づける前に解決すべきことがいくつかありました。

1. タイマーでxhr.addEventListener("progress"...が、第2 AJAX呼び出しを使用していない：それはまた、リソースの消費に軽量になります。

2. ではなくsetIntervalまたはsetTimeoutのようにタイマーを使用して - それは不要なために来るかもしれない非同期（async）の要求があるとして - のように最初の呼び出しのコールバックで再帰呼び出しを使用します。

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

3. その私の第二の実現スクリプトの呼び出しはまだ実行中の最初のスクリプトで遅れていますか？はい。ここの鍵はsession_write_close()です！ 私はこの良い記事にこのように感謝を掘ることができます： https://stackoverflow.com/a/1430921/2012407

と私は別の質問に答えるためにここに非常に簡単な例を掲載：

https://stackoverflow.com/a/38334673/2012407コメントの人たちのすべてのあなたの助けをありがとうそれは私をこの解決策に導いた。 ;）