How do I get the value of the current percentage of an upload?

Using the jquery ajaxform plugin to do this:

 $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });

Download the plugin here link

Without the plugin it's a bit tricky to strongly recommend lowering it as it is very useful for submitting forms via ajax among other things.

In HTML5 you can do this by adding a progress listener to the upload property of a XMLHttpRequest (used to upload the file via Ajax):

xhr.upload.addEventListener("progress", function(e) {
    var pc = parseInt(100 - (e.loaded / e.total * 100));
    // Atualizar sua barra de progresso usando "pc"
}, false);

Source (and full example) in English: How to Create Graphical File Upload Progress Bars in HTML5 and JavaScript . This functionality, it seems, is supported by all popular browsers , in its most current version only (ie it does not work in older but still heavily used versions such as IE9 or earlier).

As already mentioned, there are javascript libraries that do the hard work for you. In general it is not worth getting into low-level details, as probably different versions of different browsers will be used you will have to deal with numerous compatibility issues.

Javascript Libraries

I recommend using the jQuery File Upload plugin. I've used it on some projects, even supporting multiple simultaneous uploads showing the results in a table. See the demo here .

Another alternative, especially to support older browsers, is uploadify . It has a fallback using Flash, so when the browser does not support the advanced upload features, it will automatically use this alternative.

Implementation that depends on PHP

On the other hand, if this functionality is important to your application and it will receive large uploads, you can use PHP's recent Session Upload Progress functionality, available from version 5.4.

Session Upload Progress does not affect the upload request, but allows you to monitor the upload through a variable placed in the session. Then you could make an Ajax from the page to retrieve the percentage of the upload, passing the field name by parameter. See the example:

<?php
//nome do elemento da sessão contendo um array de informações de upload
$key = ini_get("session.upload_progress.prefix") .
        $_POST[ini_get("session.upload_progress.name")];

//recuperao vetor com informações de upload
$uploads_array = $_SESSION[$key];

//exibe as informações de um upload em específico
var_dump($uploads_array[$_POST["myField"]]);
?>

To enable the feature, enable the session.upload_progress.enabled parameter in php.ini .

See the documentation for more details.