上传时的Ajax进度栏

Question

I've been trying to implement a progress bar with AJAX and I'm getting ZERO output from the code. I was wondering if anyone could let me know what I could be missing.

   $("#uploadSubmitBtn").click(function(){
    var formData = new FormData($("#mediaUploadForm")[0]);
    var usersFiles=$("#uploadBtn")[0].files;
    formData.append('usersUpload', usersFiles);
    $.ajax({

        //for our progress bar...
         xhr: function() {
         //var xhr = new window.XMLHttpRequest();
             var xhr = $.ajaxSettings.xhr();
             xhr.upload.addEventListener("progress", function(evt) {
                 alert("attempting progress calculation..");
               if (evt.lengthComputable) {
                  var percentComplete = Math.round( (evt.loaded * 100/ evt.total) );
                  console.log("percent completed = " + percentComplete);
               }
             },  false);
             return xhr;
         },//end xhr function

        //other stuff
        url : "upload",
        type : 'post',
        data : formData,
        async : false,
        cache: false,
        processData: false,
        contentType: false,
        success : function(resp){
            $('#msgBoxText').text(resp);
            $('#msgBox').slideDown("slow");
       },
    });
});//end of submitting media

Answer 1

so it looks like setting the async value to true solved the issue. so code snippet now looks like so $.ajax({ url : "upload", type : 'post', data : formData, async : true, cache: true, processData: false, contentType: false,

Thanks to those who at least looked :)