使用JQuery在执行PHP脚本时动画进度条

Question

我有一个表单，可以在PHP页面上发送一些信息。 我设法在表单提交上设置进度条的动画，我也希望在脚本执行持续时间上设置进度条的动画。

我的脚本获取信息并将其发送到许多电子邮件地址（如新闻稿）。

我的表格带有进度条：

<form class="form-horizontal fadeIn animated" id="formImport" action="PHP/traitementImport.php" method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-sm-2 control-label">Catégorie</label>
        <div class="col-sm-10">
            <?php
                $sql2 = "SELECT idg, intitule, titrefr, titreuk FROM groupe;";
                $req2 = mysqli_query($mysqli, $sql2) or die('Erreur SQL !<br/>' . $sql2 . '<br/>' . mysqli_error($mysqli));
            ?>
            <select class="form-control" name="categ" style="height:34px;" id="listeGroup">
                <?php
                    while ($data2 = mysqli_fetch_array($req2)) { // Remplissage du SELECT
                        $idg = $data2['idg'];
                        $intitule = $data2['intitule'];
                        $titrefr = $data2['titrefr'];
                        $titreuk = $data2['titreuk'];                    
                ?>

                        <option value="<?php echo $idg ?>" class="valGroup"><?php echo $intitule ?></option>
                        <option value="<?php echo $titrefr ?>" id="<?php echo $idg ?>titrefr" style="display:none;"></option>
                        <option value="<?php echo $titreuk ?>" id="<?php echo $idg ?>titreuk" style="display:none;"></option>
                <?php } ?>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Titre FR</label>
        <div class="col-sm-10">
            <input type="text" id="inputRapportFR" name="rapportFR" class="form-control" placeholder="Titre du rapport français">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Titre UK</label>
        <div class="col-sm-10">
            <input type="text" id="inputRapportUK" name="rapportUK" class="form-control" placeholder="Titre du rapport anglais">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Rapport FR</label>
        <div class="col-sm-10">
            <div class="input-group">
                <span class="input-group-btn">
                    <span class="btn btn-primary btn-file">
                        Choisir dossier <input id="rapportFR" name="rapportFR[]" type="file" multiple directory="" webkitdirectory="" mozdirectory="">
                    </span>
                </span>
            <input type="text" class="form-control file" placeholder="RAPPORT FRANCAIS" readonly />
        </div>
      </div>
  </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">Rapport UK</label>
      <div class="col-sm-10">
          <div class="input-group">
              <span class="input-group-btn">
                  <span class="btn btn-primary btn-file">
                      Choisir dossier <input id="rapportUK" name="rapportUK[]" type="file" multiple directory="" webkitdirectory="" mozdirectory="">
                  </span>
              </span>
              <input type="text" class="form-control file" placeholder="RAPPORT ANGLAIS" readonly>
          </div>
      </div>
  </div>
  <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
          <button id="btnEnvoyer" type="submit" class="btn btn-default">Envoyer</button>
      </div>
  </div>
</form>
<div class="progress" style="display:none;">
    <div class="bar"></div>
        <div class="percent">0%</div>
    </div>
<div id="status"></div>

我的Javascript代码：

(function () {
        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');

        $('form').ajaxForm({
            beforeSend: function () {
                $(".progress").show();
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function (xhr) {
                bar.width("100%");
                percent.html("100%");
                status.html(xhr.responseText);
            }
        });
    })();

我想调用'MyScript.php'，执行它而不更改页面和显示，并在执行时为我的进度条设置动画。