Ajax loading progress bar with percentage

Question

I am working with an image uploader. The issue is that the image uploader only shows me an ajax progress bar image but without any percentage.

How can I implement a percentage to the code below (which is relevant to the progress bar)?

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);
    }
};

Are you searching for an HTML5 solution or an old school method? — VAShhh, Jul 05 '12 at 13:30

score 1 · Accepted Answer · edited May 23 '17 at 12:20

Actually, due to the fact that the communication is client-server without a persistent connection you can't display percentage with ajax in a non-HTML5 browser.

You should consider (if you want to maintain the compatibility) to use some flash uploaders that should work pretty well for your needing (this is the first that I've found)

You can alternatively use a persistent connection method like COMET or similar, but it's hardly compatible with the older browsers anyway.

If you are an "open source" friendly guy, I think that it's better if you use HTML5 progress bar and an alternative without progress for people with incompatible browsers (If it's something like a jQuery plugin, you will anyway have the majority of your users that use an HTML5 browser)

Ajax loading progress bar with percentage

1 Answers1