javascript - 修改带有标签 'multiple' 的输入元素的行为

Question

我有一个表单，我希望用户在其中上传多张照片。通常，当我一次选择多个文件时，它工作得很好。但问题是，如果用户想一张一张地添加图片，则每次添加后，前一个文件都会被删除(因为每次添加后的文件长度为1)。我该如何解决？谢谢

$("#files").change(function(){
  console.log("the length of files: ", $("#files")[0].files.length); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="file" name="" id="files" multiple>
</form>

Answer 1

您可以保留一个文件数组，并将每个文件添加到该数组中。这样您将获得添加的所有文件的运行总数。当前方法的问题是，每次上传时，文件都会被覆盖，因此，将它们保存到数组中是解决此问题的一种方法。

请参阅下面的工作示例:

let uploaded_files = [];
$("#files").change(function(){
  let currentFiles = $("#files")[0].files;
  uploaded_files = [...uploaded_files, ...currentFiles];
  console.log(uploaded_files.length); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="file" name="" id="files" multiple>
</form>