帶有百分比的Ajax加載進度欄

Question

我正在與圖像上傳器合作。 問題是圖像上傳器僅顯示一個ajax進度條圖像，但沒有任何百分比。

如何在下面的代碼中實現一個百分比（與進度條有關）？

jQuery.itemForm.submitFormIfNotImageLoading = function（loadingTime）{

    if (jQuery.uploaderPreviewer.loadingImages()) {
      if(loadingTime > $.itemForm.loadingTimeout) {
        var settings = {
            title: $.itemForm.messages.timeoutTitle,
            message: $.itemForm.messages.timeoutMessage,
            buttons: { 'OK': function() { $(this).dialog("close"); } }
        };
        $.globalFunctions.openDialog(settings);
      }
      else {
        loadingTime += $.itemForm.checkingIntervalTime;
        var progressBarValue = $("#progressbar").progressbar('value')
                             + $.itemForm.progressBarInterval;
        $("#progressbar").progressbar('value', progressBarValue);
        var recursiveCall = "$.itemForm.submitFormIfNotImageLoading(" + loadingTime + ")";
        setTimeout(recursiveCall, $.itemForm.checkingIntervalTime);
      }
    }
    else {
      submitForm();
    }
};

function showImageLoadingMessage() {

    var options = {
        title: $.itemForm.messages.savingTitle,
        message: $.itemForm.messages.savingMessage
    };

    $.globalFunctions.openDialog(options);

    $("#progressbar").progressbar({
        value: 0
    });

    var progressBarInterval = $.itemForm.checkingIntervalTime * 100 / $.itemForm.loadingTimeout;
    if (progressBarInterval != Number.NaN) {
        $.itemForm.progressBarInterval = Math.floor(progressBarInterval);
    }
};

Answer 1

實際上，由於通信是沒有持久連接的客戶端-服務器，因此您無法在非HTML5瀏覽器中 使用 ajax顯示百分比。

您應該考慮（如果要保持兼容性）使用一些應該可以很好滿足您需求的Flash上​​傳器（ 這是我發現的第一個）

您也可以使用諸如COMET或類似方法的持久連接方法，但是無論如何它都與舊版瀏覽器幾乎不兼容。

如果您是一個“開放源代碼”友好的人，我認為使用HTML5進度欄和不帶瀏覽器的瀏覽器不兼容的情況會更好（對於像jQuery插件這樣的人，無論如何您都會擁有大多數用戶使用HTML5瀏覽器）