I cant update the progressbar via $.ajax on form submit

问题

After the form submits, the progressbar appears, and the getProgress function is called. getProgress check a php file (which uses the uploadprogress apache mod to get the current upload progress) and returns a number from 0 to 100 (which means complete).

OK, The idea is that getProgress is self-executed if the number returned is not 100. Otherwise, the form continues to upload.php where the file is manipulated.

THIS IS WHAT IM LOOKING FOR: http://screenr.com/ByG <- video.

Here is the HTML part.

<form method="post" action="upload.php" enctype="multipart/form-data" id="UploadForm">
    <input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
    <input type="file" name="file">
    <input type="submit" name="submit" value="Upload!">
</form>
<div id="UploadBarContainer">
        <div id="LoadBar"></div>
        <div id="ProgressBar"></div>
    </div>

Here is the jQuery part. Which seems to be broken

$(function(){

    // This flag determines if the upload has started
    var started = false;

    // Start progress tracking when the form is submitted
    $('#UploadForm').submit(function() {

        //Update the flag to true.
        started = true;

        //Hide the form.
        $('#UploadForm').hide();

        //Show the progress bar.
        $('#UploadBarContainer, #LoadBar, #ProgressBar').show();

        //Start updating progress after a 2 second delay.
        //This is to prevent the getprogress.php assume that upload is complete. 
        setTimeout(function () {

            // We pass the upload identifier to our function
            getProgress($('#uid').val());

        }, 2000);

    });


    //Function used to get the current upload progress.
    //It should be executed over and over again untill the result is 100.
    function getProgress(id) {

        //Get the current time.
        var time = new Date().getTime();

        //Make an ajax request to the server.
        $.ajax({

            //Pass the data trought GET method.
            type: 'GET',

            //Get the progress from this php file.
            url: 'getprogress.php',                         

            //Pass our upload identifier as a parameter and current time to prevent caching.
            data: { uid: id, t: time }, 

            //Get the results.
            success: function (data) {

                //Get the output as an integer.
                var progress = parseInt(data, 10);

                //If upload progress is not 100, change bar percentage and update again.
                if (progress < 100) {

                    //Update the progress bar percentage.
                    //But only if we have started.
                    $('#ProgressBar').css('width', progress + '%');

                    //If we aren't done, update again.
                    getProgress(id);

                }
            }

        });

    }

});

Just i case this helps, here is the getprogress.php file called on the $.ajax request.

if (isset($_GET['uid'])) {
    // Fetch the upload progress data
    $status = uploadprogress_get_info($_GET['uid']);
    if ($status) {
        // Calculate the current percentage
        echo round($status['bytes_uploaded']/$status['bytes_total']*100);
    }
    else {
        // If there is no data, assume it's done
        echo 100;
    }
}

Any help is appreciated, i have a live demo but i scared about what you could upload.

回答1:

only new versions of some browsers support file upload progress. You should check your net with firebug if getprogress.php send numbers or just errors. You may look these: http:

Server-side, get progress on sending file
may use swf swfupload
another jquery plugin: uploadify

回答2:

Well finally i came to the conclusion it is not possible to get this working on webkit browsers such as opera, chrome and safari, not so on firefox and internet explorer.

Webkit browsers tend to block any ajax while a file is being uploaded.

You may want to check this out: https://bugs.webkit.org/show_bug.cgi?id=23933

来源：https://stackoverflow.com/questions/4527914/i-cant-update-the-progressbar-via-ajax-on-form-submit

标签

ajax

jquery

upload

progress-bar