继承网站Javascript/AJAX进度条异常，请求技术支持

我接手了一个网站的维护与开发工作，该网站部分功能用Javascript/AJAX实现处理过程的进度条展示。我编写了数据库记录提取脚本，想给它加上进度条功能，但使用现有脚本时，进度条会直接跳至100%，实际的提取处理却没开始。我搞不懂这个Javascript组件的工作机制，也不清楚该如何在处理的不同阶段调用相关函数。

以下是对应的PHP页面代码：

<?php
/* export_sightings.php
Export all sightings records from cbcrecords as CSV file
*/

require_once($_SERVER['DOCUMENT_ROOT'] . '/inc/standard_page_start.php');
?>

<!-- ================================ -->
<!-- ***** MAIN CONTENT START ***** -->

<section class="main-container padding-bottom-clear">
<div class="container">
    <div class="row">
        <div class="main col-12">
            <h3 class="title">Export sightings to CSV</h3>
            <div class="separator-2"></div>
            <p>Use this tool to extract sightings data to a CSV which will be sent to you by email.</p>
        </div>
    </div>

    <div class="row">
        <div class="main col-12">
            <form action="src/export_sightings.php" 
                  id="myForm" 
                  name="frmupload" 
                  method="post" 
                  enctype="multipart/form-data">
                    <input type="submit" 
                           name='startextract' 
                           class="submit-button btn btn-sm btn-default" 
                           value="START EXTRACT"  
                           onclick='upload_image();'/>
            </form>

            <div class="progress" id="progress_bar">
            <div class="bar" id="bar"><p class="text-white text-center">extracting the data...<br><br></p></div>
            <div class="percent" id="percent">0%</div>
            </div>

            <p class="text-danger mt-4"><i class="fa fa-warning"></i> Please wait for the yellow confirmation box to appear below once you have clicked 'START EXTRACT'. Depending upon the number of records to be extracted, this may take a while!</p>

            <div class="output_image" id="output_image"></div>


        </div>
    </div>
</div>
</section>

<!-- ***** MAIN CONTENT END ***** -->
<!-- ================================ -->

<?php include 'inc/standard_page_end.php'; ?>

对应的progress.js脚本代码：

function upload_image() 
{
  console.log('Hit the progress.js scritpt');
  var bar = $('#bar');
  var percent = $('#percent');
  $('#myForm').ajaxForm({
    beforeSubmit: function() {
      document.getElementById("progress_bar").style.display="block";
      var percentVal = '0%';
      bar.width(percentVal)
      percent.html(percentVal);
    },

    uploadProgress: function(event, position, total, percentComplete) {
      var percentVal = percentComplete + '%';
      bar.width(percentVal)
      percent.html(percentVal);
    },

  success: function() {
      var percentVal = '100%';
      bar.width(percentVal)
      percent.html(percentVal);
      console.log(percentVal);
    },

    complete: function(xhr) {
      if(xhr.responseText)
      {
        document.getElementById("output_image").innerHTML=xhr.responseText;
      }
    }
  }); 
}

我经验有限，原本以为可以单独调用uploadProgress和success函数，但不知道该怎么操作，现在这两个函数似乎是自动执行的。我查看了网站中另外两处使用该进度条的功能，没发现除了这个progress.js核心脚本之外的其他调用。

内容的提问来源于stack exchange，提问作者David Shearan