ページがロードされているときにjQueryのChrome/ChromiumでAJAXが起動しない

シナリオ：nginx uploadProgressモジュールを使用してアップロードの進捗状況を報告するアップロードフォームがあります。以下のコードはFirefoxでうまく動作しますが、ChromeとChromiumではページが読み込まれている間にAJAXが起動されず、要求を停止したときにのみアップロードが実行されます（途中でアップロードされます）。なぜそれがうまくいかないのか分かりません。だから、どんな助けでも大歓迎です。ページがロードされているときにjQueryのChrome/ChromiumでAJAXが起動しない

奇妙なことに、Chrome/Chromiumは、私にそれを伝えない限り、アップロードの進捗状況をウィンドウステータスバーに表示しているようです。私はそれを設定していますどこで見ることができます

enter image description here

は一切ありません。 Chromeに内部進捗メーターがある可能性はありますか？

upload.js

$(document).ready(function() 
{ 
    $('form').uploadProgress(
    { 
     uploading: function(upload) 
     { 
      $('#percents').html(upload.percents+'%'); 
      $('#progressbar').css({width: upload.percents+'%'}); 
     }, 
     progressUrl: "/progress", 
     interval: 3 
    }); 
})

jquery.uploadProgress.js

/* 
* jquery.uploadProgress 
* 
* Copyright (c) 2008 Piotr Sarnacki (drogomir.com) 
* - Original release. 
* 
* Copyright (c) 2011 Mathew Davies ([email protected]) 
* - Refactored a lot of code into their own functions 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/mit-license.php 
* 
*/ 
(function($) 
{ 
    /** 
    * Generate a UUID used to uniquely identify form uploads. 
    * 
    * @return string 
    */ 
    function generate_uuid() 
    { 
     var uuid = ""; 

     for (i = 0; i < 32; i++) 
     { 
      uuid += Math.floor(Math.random() * 16).toString(16); 
     } 

     return uuid; 
    } 

    /** 
    * Calls the progress URL to get the latest statistics from 
    * the uploaded form. 
    * 
    * @return void 
    */ 
    function update(object, options) 
    { 
     $.ajax(
     { 
      type: 'GET', 
      cache: false, 
      dataType: options.dataType, 
      url: options.progressUrl, 
      beforeSend: function(xhr) 
      { 
       xhr.setRequestHeader("X-Progress-ID", options.uuid); 
      }, 
      success: function(upload) 
      { 
       alert('progress ...'); 

       if (upload) 
       { 
        if (upload.state == 'uploading') 
        { 
         upload.percents = Math.floor((upload.received/upload.size) * 1024)/10; 
         options.uploading(upload); 
        } 

        if (upload.state == 'done' || upload.state == 'error') 
        { 
         window.clearTimeout(options.timer); 
        } 

        if (upload.state == 'done') 
        { 
         upload.percents = 100; 
         options.done(upload); 
        } 

        if (upload.state == 'error') 
        { 
         upload.percents = 0; 
         options.error(upload); 
        } 
       } 
      } 
     }); 
    } 

    /** 
    * Updates the form action to use the UUID. 
    */ 
    function update_form_action(form, uuid) 
    { 
     if(old_id = /X-Progress-ID=([^&]+)/.exec(form.attr("action"))) 
     { 
      var action = form.attr("action").replace(old_id[1], uuid); 
     } 
     else 
     { 
      var action = form.attr("action") + "?X-Progress-ID=" + uuid; 
     } 

     form.attr("action", action); 
    } 

    $.fn.uploadProgress = function(options) 
    { 
     var options = $.extend(
     { 
      dataType: "json", 
      interval: 2000, 
      progressUrl: "/progress", 
      start: function() {}, 
      uploading: function() {}, 
      done: function() {}, 
      error: function() {}, 
      timer: "" 
     }, options); 


     return this.each(function() 
     { 
      $(this).submit(function() 
      { 
       var $this = $(this); 

       // Generate a new UUID 
       options.uuid = generate_uuid(); 

       // Update form action with ID 
       update_form_action($this, options.uuid); 

       // Start callback 
       options.start(); 

       // Start process 
       options.timer = window.setInterval(function() 
       { 
        update($this, options) 
       }, 
       options.interval * 1000); 
      }); 
     }); 
    }; 
})(jQuery);

出典

2011-05-26 The Pixel Developer

Chromeは確かに内部の進捗メーターを持っています。 window.statusがどこにあるかを並べ替えて表示し、ファイルのアップロード中に自動的に更新します。 – ajm