多文件上传javascript

Question

我有一个由按钮触发的多文件上传表单。我正在尝试使用 ajax 逐个上传选定的文件以创建单独的进度条。

我创建了这个事件$(document).on("change", "#upload_files", (e) =>{});，但它只适用于第一个文件。

我尝试过this，但 FileList 总是为空，this 也是，但如果用户上传多个文件 web 服务返回 503 错误。

我不想使用任何外部插件，因为我想了解它的工作原理。

var count = 0;

$(document).on("change", "#upload_files", function(e) {
  if(typeof this.files[count] === 'undefined'){
    return false; 
  }
    
  let form_data = new FormData();
  form_data.append('file', this.files[count]);
  form_data.append('folderID', open_folder);
    
  $.ajax({
    'url':'/domain/files.upload_file',
    'type':'POST',
    'data': form_data,
    'contentType': false,
    'processData': false,
    'success': function(){
       count++;
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

<button onclick="$('#upload_files').click()">Open file</button>

<input type="file" id="upload_files" class="d-none" multiple/>

CodePen example with contextmenu

Answer 1

当更改事件发生时，您仅上传一个文件，并且每次选择仅发生一次，而不是每个选择的文件一次。
下面我遍历文件列表并一个接一个地上传。

$(document).on("change", "#upload_files", async function(e) {

  for (let x = 0; x < this.files.length; x++){
    
    let form_data = new FormData();
    form_data.append('file', this.files[x]);
    form_data.append('folderID', 'open_folder');
    await $.ajax({
      'url':'/domain/files.upload_file',
      'type':'POST',
      'data': form_data,
       'contentType': false,
      'processData': false
    }).catch(e=>console.log(e));
  }
});