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

您遇到的问题是<input>标签在这里是“原子地”操作。无论选择什么，都可以选择。如果您以后想要添加其他元素，则必须使用插件（如建议的那样），或者自己处理。

let allFiles = [];
$('#files').change(function() {
  this.allFiles = this.allFiles.concat($("#files")[0].files);
  showFileNames();
});

请注意我怎么说文件是“连接”到allFiles变量的。

此外，showFileNames函数可以呈现所有文件，例如只需将文件名放入表格，列表或其他内容即可。并且对于每个文件，您可能还会有一个“ x”来删除它。

现在，当您稍后提交表单时，可以使用allFiles代替直接输入的内容，例如通过自己构建一个FormData。

Answer 2

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

请参见下面的工作示例：

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>

用标签“ multiple”修改输入元素的行为

2 个答案: