Afficher une progression sur le téléchargement de plusieurs fichiers Jquery / Ajax

J'ai télécharger le formulaire qui permet aux utilisateurs de télécharger de multiples fichiers. J'ai décidé qu'une barre de progression serait bien si les fichiers sont assez volumineux. Ci-dessous mon code source. Je suis nouveau sur jquery normalement, je voudrais juste le php, mais je trouve que l'ajax est plus convivial.

<div id="new_upload">
<div class="close_btn"></div>
<div id="uploads"></div>
<form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file">
<fieldset><legend>Upload an image or video</legend>
<input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /><input type="submit" value="upload file" id="upload_file_btn" required />
</fieldset>
<div class="bar">
<div class="bar_fill" id="pb">
<div class="bar_fill_text" id="pt"></div>
</div>
</div>
</form>
</div>
<script>
function OnProgress(event, position, total, percentComplete){    
//Progress bar
console.log(total);
$('#pb').width(percentComplete + '%') //update progressbar percent complete
$('#pt').html(percentComplete + '%'); //update status text
}
function beforeSubmit(){
console.log('ajax start');
}
function afterSuccess(data){
console.log(data);
}
$(document).ready(function(e) {
$('#upload_file').submit(function(event){
event.preventDefault();
var filedata = document.getElementById("file");
formdata = new FormData();
var i = 0, len = filedata.files.length, file;
for (i; i < len; i++) {
file = filedata.files[i];
formdata.append("file[]", file);
}
formdata.append("json",true);
$.ajax({
url: "global.func/file_upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
dataType:"JSON",
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
beforeSubmit: beforeSubmit,
uploadProgress:OnProgress, 
success: afterSuccess,
resetForm: true
});
});
});
</script>

L'image de téléchargement fonctionne très bien, le tableau de l'envoyer à l'ajax mais la barre de progression ne bouge pas. En fait la console.journal pour les deux fonctions appelées besoin pour produire ce n'apparaissent pas non plus. Est-il une bonne façon d'appeler les fonctions dans ma requête ajax qui permettrait d'obtenir cette barre de progression pour le travail.

beforeSubmit: beforeSubmit,
uploadProgress:OnProgress,
succès: afterSuccess,

NOTER que cette fonction de la réussite: afterSuccess' est de travail que la console est l'affichage de mes données.

source d'informationauteur Paul Ledger | 2014-04-22