malsup jQuery Form: Upload Progress doesn't perform as expected

malsup jQuery Form: Upload Progress doesn't perform as expected

I have excel file upload function. The main problem is the uploadProgress doesn't show its progress as it should be. It's just an instant from 0 to 100% progress, doesn't indicate there's upload progress on my website. The upload progress just straightaway to 100% before the server is running an upload process, it's not concurrent. Anyway after my website is successfully ran the upload progress, it throws the success function. With the current upload progress state, my website just looks static when uploading excel file. How do I do to fix it? By the way, I run my website locally.

  1. fileInput.on('change', function(event){
  2.         $("#for-loader-excel").addClass("for-loading-excel")
  3.        
  4.         var get_id = $("#get-id-excel").val()
  5.         $("#excel-questions-form").ajaxForm({
  6.             data: {'hidden-excel': get_id},
  7.             uploadProgress: function(event, position, total, percentComplete) {
  8.                 $("#for-loader-excel").css("width", percentComplete + "%")
  9.             },
  10.             success: function(response) {
  11.                 var response = JSON.parse(response)
  12.                 if (!response.success) {
  13.                     $.jGrowl(response.message, { header: 'Failed Uploading', life: 5000 })
  14.                 } else location.reload()
  15.             },
  16.             error: function(response) {
  17.                 alert("Error Is Occured")
  18.             }
  19.         }).submit();
  20.     });