AJAX文件上传后重定向失败及进度条异常问题求助

我通过jQuery的AJAX实现文件上传功能，但上传完成后无法完成预期重定向：本该跳转到index.php?action=u&step=2，结果却回到了上传表单页面index.php。我尝试过重写进度条逻辑，也试过分离AJAX后的处理逻辑——后者能正常重定向，但进度条失效，还出现readyState为0的错误。

原始实现代码 #

jQuery上传逻辑 #

jQuery(document).ready(function($) {

  $("#uploadform").submit(function(e){
         e.preventDefault();

         $('input:submit').attr("disabled", true);
         $("#addanother").attr("disabled", "disabled");
         $("#uploadProgress").show();

         var formData = new FormData(this); // Create FormData object from the form

         var loadLoader = function() {
             $.get("index.php?action=u&step=99", function(data) {
                var uploaded = parseInt(data);
                console.log("Loaded:", uploaded);
                updateProgressBar(uploaded);
             });
         }; //End of loadLoder Function

         var updateProgressBar = function (uploaded) {
             console.log("Uploaded: " + uploaded);
             $(".badge").text(uploaded +"%");
             $(".bar").each(function() {
                var $that = $(this);
                var percent = $that.data('uploaded');
                $that.progressbar({
                   value: percent
                });
              }); //end of each(function

             if (uploaded == 100) {
                $(".progress, .badge, #uploadProgress, #cancel_upload").hide();
                $("#uploadProgress").text("Upload complete 100%").show();
                setTimeout(function() {
                   window.location.href = "index.php?action=u&step=2";
                }, 1000);
                clearInterval(loader)
             }
         };

         $.ajax({
          url: 'index.php?action=u&step=99&type=ajax',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          xhr:function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
              if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
                console.log ('Upload progress:', percent + '%');
                $(".progress .bar").css('width', percent + "%");
              }
            }, false);
            return xhr;
          },
          success: function (data) {
            console.log('Upload Complete:', data);
            $("#uploadProgress").hide();
            setTimeout(function() {
               window.location.href = "index.php?action=u&step=2";
            }, 1000);
            clearInterval(loader);

          },
          error: function (xhr, status, error) {
            console.error('Upload error:', xhr, status, error);
          }
        });//end of getProgressBar

        var loader = setInterval(loadLoader, 1000);

     });
  });

表单HTML代码 #

<div id="upload">
  <form
    method="post"
    enctype="multipart/form-data"
    action="{$script}"
    name="uploadform"
    id="uploadform"
  >

<!--Some code with the rest of the form to upload the file-->

    <div id="uploadbutton" style="visibility: hidden">
      <br />
      <input
        type="submit"
        name="upload"
        class="submit"
        value="{tr}Proceed with upload{/tr}"
      />&nbsp;OR&nbsp;<input
        type="button"
        class="submit"
        name="addanother"
        id="addanother"
        value="{tr}Add another file{/tr}"
        onclick="addrow('myTable');"
      />
    </div>
    <br /><br />
    <div id="uploadProgress" name="uploadProgress" style="display: none">
      {tr}Please wait while upload is in progress {/tr}
      <div class="progress">
        <div class="bar" style="width: 0%"></div>
      </div>
      <span class="badge" style="display: none">0%</span>
    </div>
    <br />
    <input
      type="button"
      name="cancel_upload"
      id="cancel_upload"
      class="submit"
      value="{tr}Cancel upload{/tr}"
      style="display: none"
      onclick="parent.location='index.php?action=u';"
    />
  </form>
</div>

尝试修改后的代码（进度条失效，但重定向正常） #

jQuery(document).ready(function($) {

  $("#uploadform").submit(function(e){
         $('input:submit').attr("disabled", true);
         $("#addanother").attr("disabled", "disabled");

         var formData = new FormData(this); // Create FormData object from the form

         $.ajax({
          url: 'index.php?action=u&step=99&type=ajax',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          xhr:function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
              if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
                console.log ('Upload progress:', percent + '%');
                $(".progress .bar").css('width', percent + "%");
              }
            }, false);
            return xhr;
          },
          success: function (data) {
            console.log('Upload Complete:', data);
          },
          error: function (xhr, status, error) {
            console.error('Upload error:', xhr, status, error);
          },

  function(data) {
      var uploaded = parseInt(data);
      console.log("Uploaded:", uploaded);
      $("#uploadProgress").progressbar({
        value: uploaded
      });

      if (uploaded == 100) {
          $(".progress, .badge, #uploadProgress, #cancel_upload").hide();
          $("#uploadProgress").text("Upload complete 100%!").show();
          setTimeout(function () {
              window.location.href = "index.php?action=u&step=2";
          }, 1000);
          clearInterval(loadLoader);
      } else if (uploaded < 100) {
          $(".progress, .badge, #uploadProgress, #cancel_upload").show();
          $(".badge").text(uploaded + "%");
          console.log("Progress updated:", uploaded + "%");
          $(".bar").css('width', uploaded + "%");
      }

      if (uploaded < 100)
          var loader = setInterval(loadLoader, 1000);
  }
  });

  var loadLoader = function () {
      $.get("index.php?action=u&step=99&type=ajax", function (data) {
          var uploaded = parseInt(data);
          console.log("Loaded:", uploaded);
          $("#uploadProgress").progressbar({
            value: uploaded
          });

          if (uploaded == 100) {
              $(".progress, .badge, #uploadProgress, #cancel_upload").hide();
              $("#uploadProgress").text("Upload complete 100%!").show();
              setTimeout(function () {
                  window.location.href = "index.php?action=u&step=2";
              }, 1000);
          } else if (uploaded < 100) {
              $(".progress, .badge, #uploadProgress, #cancel_upload").show();
              $(".badge").text(uploaded + "%");
              console.log("Progress updated:", uploaded + "%");
              $(".bar").css('width', uploaded + "%");
          }
      });
  };
     });//end of getProgressBar
  });

问题总结 #

• 原始代码中，上传完成后执行window.location.href = "index.php?action=u&step=2"时，会被重定向回上传表单页面index.php
• 修改后的代码能正常重定向，但进度条功能失效，控制台出现readyState为0的错误

内容的提问来源于stack exchange，提问作者T Squared