多个文件上传 javascript

Question

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

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

我试过this but FileList always is empty, also ，但如果用户上传多个文件网络服务return 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));
  }
});

多个文件上传 javascript

Multiple file upload javascript

ajax

jquery

file-upload

asyncfileupload