Question

我遇到2个文件或多个文件上传有问题的问题

问题是：

1）如果我仅上载 2 files 1 file 个进度。

2）第二个file 进度不会开始，为什么？

问题：当我上传 2 files 时，第二个file 进度不会开始

复制步骤：

选择2个文件
点击显示进度
遵守console.log，第二个文件上传将不会开始

下面是我的完整代码：

var fileUploadList = [];

function showProgress() {
  for (var i = 0; i < fileUploadList.length; i++) {
    console.log("fileUploadList fileUploadList", fileUploadList[i]);

    var file = fileUploadList[i];

    var formData = new FormData();
    formData.append("filename", file.name);
    formData.append("Content-Type", "multipart/form-data");
    formData.append("file", file);

    $.ajax({
      url: "https://jsonplaceholder.typicode.com/posts",
      type: "POST",
      cache: false,
      contentType: false,
      processData: false,
      data: formData,
      xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener(
          "progress",
          function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = (evt.loaded / evt.total) * 100;
              console.log(
                "percentage of upload completed ",
                percentComplete,
                " % ",
                "for FILENAME",
                file.name,
              );
            }
          },
          false,
        );
        xhr.upload.addEventListener("load", function(event) {
          console.log("Upload Completed");
        });

        return xhr;
      },
      error: function(error) {},
    });
  }
}

$("#mulfileupload").on("change", function(evt) {
  for (var i = 0; i < evt.target.files.length; i++) {
    //console.log('evt.target.files[i];',evt.target.files[i]);
    var file = fileUploadList.push(evt.target.files[i]);
  }
});

$("#showuploadprogress").click(function() {
  showProgress();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="file" id="mulfileupload" multiple>

<button id="showuploadprogress">show progress</button>

请提前帮助我！

为什么我没有为多个文件取得进展

0 个答案: