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

Ajax loading progress bar with percentage

本文关键字：加载 Ajax 百分比      更新时间：2023-09-26

我正在使用图像上传器。问题是图像上传器只向我显示一个 ajax 进度条图像，而没有任何百分比。

如何实现以下代码的百分比（与进度条相关）？

jQuery.itemForm.submitFormIfNotImageLoading = function（loadTime） {

    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浏览器中显示ajax的百分比。

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

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

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

相关文章：