带有百分比的Ajax加载进度条答案

【问题标题】：Ajax loading progress bar with percentage带有百分比的Ajax加载进度条
【发布时间】：2012-07-05 13:23:47
【问题描述】：

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

【问题讨论】：

您在寻找 HTML5 解决方案还是老式方法？
我正在寻找一种老式的方法

标签： javascript jquery ajax

【解决方案1】：

实际上，由于通信是客户端-服务器，没有持久连接你不能显示百分比 with ajax 在非 HTML5浏览器。

你应该考虑（如果你想保持兼容性）使用一些应该可以很好地满足你需要的 Flash 上传器（this 是我发现的第一个）

您也可以使用COMET 或类似的持久连接方法，但无论如何它几乎无法与旧版浏览器兼容。

如果你是一个“开源”友好的人，我认为最好使用 HTML5 进度条，而对于浏览器不兼容的人来说，最好使用没有进度的替代方案（如果它像 jQuery 插件，无论如何你都会拥有大多数使用 HTML5 浏览器的用户）

【讨论】：