當頁面加載時，jQuery AJAX不會在Chrome/Chromium中觸發

場景：我擁有的是使用nginx uploadProgress模塊報告上載進度的上載表單。下面的代碼在Firefox中工作正常，但使用Chrome和Chromium時，AJAX在頁面加載時不會被觸發，只會在停止請求時運行（上傳到中途）。我失去了爲什麼它不工作。所以，任何幫助非常感謝。當頁面加載時，jQuery AJAX不會在Chrome/Chromium中觸發

我還發現奇怪的是，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 2011-06-02 15:51:43