使用标签“多个”修改输入元素的行为答案

【问题标题】：modify the behavior of input element with tag 'multiple'使用标签“多个”修改输入元素的行为
【发布时间】：2018-12-04 10:08:13
【问题描述】：

我有一个表单，希望用户在其中上传多张照片。通常当我一次选择多个文件时，它工作正常。但问题是，如果用户想一张一张地添加图片，每次添加后，前一个文件都会被删除（因为每次添加后的文件长度为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>

【问题讨论】：

您无法修改默认行为，但您可以使用插件（例如，类似以下内容的内容：blueimp.github.io/jQuery-File-Upload（需要 jQuery，但您可以搜索其他不需要的插件） ) 以您所描述的方式提供增强的上传功能。当然，您也可以实现自己的概念版本。

标签： javascript html forms input

【解决方案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>

【讨论】：

【解决方案2】：

您遇到的问题是 <input> 标记在这里“以原子方式”运行。你选择什么，你就选择什么。如果您希望以后能够添加其他元素，则必须使用插件（如建议的那样），或者自己处理。

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

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

另外，showFileNames 函数可以渲染所有文件，或者例如只需将文件名放入表格或列表或其他内容中。每个文件可能还有一个“x”，用来删除它。

现在，当您稍后提交表单时，您可以直接使用 allFiles 而不是该输入，例如通过自己构建一个 FormData。

【讨论】：