I am using ajax Progress bar while uploading files to ec2 server. Here uploading works fine. Progress bar loading too fast. It reached 100% before the full file upload.

I refer similar questions but not found the solutions yet.

My code:

function Funname() {        
          
      $.ajax({
        
        url: url,
        type: 'post',
        enctype: 'multipart/form-data',
        data: formData,
        processData: false,  // tell jQuery not to process the data
        contentType: false,
        dataType: 'json',
        success:function(response) {
          if(response.success === true) {
              $('.progress').hide();
            }else {
                // error code
              }
        },
        xhr: function() {
        var xhr = new window.XMLHttpRequest();
         xhr.upload.addEventListener("progress", function(evt) {
          if (evt.lengthComputable) {           
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
            $('.progress-bar').width(percentComplete+'%');
            $('.progress-bar').html(percentComplete+'%'); 
          }
        }, false);
         return xhr;
        }
      });
      return false;
}

Where I am doing wrong?