我继承了一个网站的维护/开发。在一些地方，它使用JavaScript/AJAX来显示进度条，而处理发生。我写了自己的脚本提取数据库记录，我想显示进度条，而这发生。
我不明白JavaScript组件是如何工作的。当我使用它时，进度条立即显示100%，但这是在任何处理发生之前。我不知道如何改变这一点，并在处理的各个阶段调用脚本函数。我已经附上了我的PHP脚本和Javascript脚本，所以你可以看到我在做什么。
我的提取过程分为两部分。第一部分显示我的标准网页结构，并简单地要求用户点击提取按钮。当用户点击按钮时，这将调用upload_image脚本，然后“链接”到实际提取目击记录的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'; ?>

字符串
下面是JavaScript脚本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之外，我找不到对该函数的任何调用