为什么我的页面仍在加载，但我的进度条表示上传已完成？

Question

我有一个带有进度条的上传器：

index.php：

<h1>Uploader</h1>
<hr>
<form action="#">
  <input type="file" name="image">
  <button class="btn btn-sm btn-info upload" type="submit">Upload</button>
  <button type="button" class="btn btn-sm btn-danger cancel">Cancel</button>
  <div class="progress progress-striped active">
    <div class="progress-bar" style="width:0%"></div>
  </div>
</form>
<script>
  $(document).on('submit', 'form', function(e) {
    e.preventDefault();
    $form = $(this);
    uploadImage($form);
  });

  function uploadImage($form) {
    $form.find('.progress-bar').removeClass('progress-bar-success')
      .removeClass('progress-bar-danger');

    var formdata = new FormData($form[0]); //formelement
    var request = new XMLHttpRequest();

    //progress event...
    request.upload.addEventListener('progress', function(e) {
      var percent = Math.round(e.loaded / e.total * 100);
      $form.find('.progress-bar').width(percent + '%').html(percent + '%');
    });

    //progress completed load event
    request.addEventListener('load', function(e) {
      $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
      var request = new XMLHttpRequest();
      request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
          document.getElementById("result").innerHTML = request.responseText;
        }
      };
      request.open("post", "upload.php");
      request.send(formdata);
    });

    request.open('post', 'upload.php');
    request.send(formdata);

    $form.on('click', '.cancel', function() {
      request.abort();

      $form.find('.progress-bar')
        .addClass('progress-bar-danger')
        .removeClass('progress-bar-success')
        .html('upload aborted...');
    });

  }
</script>

upload.php：

<?php
   $tmp_file = $_FILES['image']['tmp_name'];
   $filename = $_FILES['image']['name'];
   move_uploaded_file($tmp_file, 'files/'. $filename);

   echo "result";
   ?>

我的问题是，进度条的加载时间  例如10秒。比我收到消息＆＃34;上传完成＆＃34;和  然后再加载10秒钟，直到加载新页面。

Answer 1

有两个相同的var声明...
尝试重命名加载侦听器中的第二个请求。

var request = new XMLHttpRequest();

修改

经过几次尝试......似乎第二个请求完全无法使用。

生成的上传脚本：

function uploadImage($form){
    $form.find('.progress-bar').removeClass('progress-bar-success')
    .removeClass('progress-bar-danger');

    var formdata = new FormData($form[0]); //formelement
    $('#image').attr({ value: '' });            // <-- Removes the file from the input.
    var formdataWithoutFile = new FormData($form[0]);
    var request = new XMLHttpRequest();

    //progress event...
    request.upload.addEventListener('progress',function(e){
        var percent = Math.round(e.loaded/e.total * 100);
        $form.find('.progress-bar').width(percent+'%').html(percent+'%');
    });

    //progress completed load event
    request.addEventListener('load',function(e){
        $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                document.getElementById("result").innerHTML = request.responseText;
            }
        }
    });

    request.open('post', 'upload.php');
    request.send(formdata);

    $form.on('click','.cancel',function(){
        request.abort();

        $form.find('.progress-bar')
        .addClass('progress-bar-danger')
        .removeClass('progress-bar-success')
        .html('upload aborted...');
    });
}