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

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

Answer 1

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)