多个文件上传javascript

如何解决多个文件上传javascript

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

我创建了此事件Rscript myRscript.R，但它仅适用于第一个文件。

我尝试了this，但FileList始终为空，this也为空，但是如果用户上传多个文件Web服务，则会返回503错误。

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

$(document).on("change","#upload_files",(e) =>{});

var count = 0;

$(document).on("change",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++;
    }
  });
});

CodePen example with contextmenu

解决方法

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

$(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));
  }
});