Ajax加载进度条的百分比

时间:2012-07-05 13:23:48

标签: javascript jquery ajax

我正在使用图片上传器。问题是图像上传器只显示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);
    }
};

1 个答案:

答案 0 :(得分:1)

实际上,由于通信是客户端 - 服务器而没有持久连接,您无法非HTML5中显示 ajax浏览器

您应该考虑(如果您想保持兼容性)使用一些适合您需要的闪存上传器(this是我发现的第一个)

您也可以使用COMET等类似的持久连接方法,但无论如何它都与旧浏览器不兼容。

如果你是一个“开源”友好的人,我认为如果你使用HTML5进度条和替代浏览器不兼容的人没有进步的替代方案会更好(如果它类似于jQuery插件,你无论如何都会占多数您的用户使用HTML5浏览器)