ajax のformdataの送信をパーセンテージ化したい

Question

jqueryでajaxのformdataの送信をパーセンテージ化してプログレスバーを作ろうとしています

var param = new Object();
var jdata = $.toJSON(param);

$.ajax({
    xhr : function(){
        XHR = $.ajaxSettings.xhr();
        if(XHR.upload){
            XHR.upload.addEventListener('progress',function(e){
                var progre = parseInt(e.loaded/e.total*10000)/100 ;
                console.log(progre+"%") ;
                $('#progressBar').css("width",progre + "%");
            }, false); 
        }
        return XHR;
    }
    ,url: url
    ,type: 'POST'
    ,data : {param:jdata}
    

}).done(function(data, textStatus, jqXHR){
    console.log("ok");

}).fail(function(jqXHR, textStatus, errorThrown){
    alert("fail");
});

<div id=loading class=loading>
    <div class=progress-bar role=progressbar id=progressBar name=progressBar></div>
</div>

このようにコードを書いてみたのですが、console.log(progre+"%") がいきなり100%になってしまいプログレスバーがうまく動きません
どうすればプログレスバーを左から右へと伸ばすにはどうすればよろしいですか

Answer 1

この式の 10000 って何でしょうか？？

e.loaded/e.total*10000

Answer 2

var progre = parseInt(e.loaded/e.total10000)/100 ;
は、
var progre = parseInt(e.loaded/e.total100);
と同じ意味になります。
10000を100で割ったら100になりますよね？
なので、

var progre = parseInt(e.loaded/e.total)/100;

でできると思います。