HTML如何进行连续文件上传？答案

【问题标题】：HTML how to do successive file uploads?HTML如何进行连续文件上传？
【发布时间】：2023-03-27 19:00:02
【问题描述】：

如何让文件输入元素进行连续上传？

也就是说，我希望用户能够点击上传按钮并上传文件。然后我希望用户能够单击相同的上传按钮并将另一个文件添加到上传的文件中，而不是覆盖所有当前文件。

我假设这将需要一些 javascript。我如何在 JS 中做到这一点？

我试过用一个

 <input type="file" multiple>

元素，但它不符合我的要求。我希望能够将文件添加到现有列表中。多个输入元素覆盖现有列表。

【问题讨论】：

请展示你的努力。 SO 不是为您提供现成代码的编码服务。
"向上传的文件添加另一个文件，而不是覆盖所有当前文件" — 上传新文件时文件是否被覆盖将取决于负责从中提取文件的服务器端代码HTTP 请求并存储它们。
Quentin 是对的，这是一个服务器端问题。如果您提交到相同的处理文件/端点/等。除非您添加处理，否则每次它都会覆盖您拥有的内容。
@Stavm 我已经添加了我尝试过的内容
@Quentin 我想要一个页面来显示用户在发送到服务器之前选择的文件。这在网站上比较常见——你上传文件，它会在你可以管理的输入元素附近的文件列表中添加一个缩略图，所有这些都是在你向服务器提交请求之前。

【解决方案1】：

也许我误解了你的要求，但我相信这可能是你想要的：

<input type="file" multiple>

编辑：虽然丑陋的 IMO 和第 3 方，这似乎有你想要的行为： https://blueimp.github.io/jQuery-File-Upload/jquery-ui.html

【讨论】：

这让我可以一次上传多个文件。相反，我希望能够选择 1 个文件，单击确定，然后再次单击上传按钮以添加另一个文件。使用多个标签，它只会覆盖已经选择的任何内容。我想改为添加到该选择中。
@DFL 啊，“multiple”输入只有在按住 control 或 shift 选择文件时才会选择多个文件，对。当你这样做时，输入只是说，例如“已选择 11 个文件。”您想显示所有文件的列表。从用户体验的角度来看，这是有道理的。您想要的将需要自定义 JavaScript，该 JavaScript 将作用于 HTML DOM 以显示文件列表，如果您允许用户将文件逐个添加到列表中，则上传此文件列表所需的任何其他逻辑。所以我认为你必须努力编写这个，或者使用 3rd 方代码。
我不知道从哪里开始。您对我可以搜索的关键字或可以执行此操作的库有什么建议吗？
@DFL 我搜索了“多文件上传小部件”，发现了这个：blueimp.github.io/jQuery-File-Upload/jquery-ui.html IMO 非常丑陋，我无法保证它的质量，但它具有您描述的将文件添加到上传它们之前的列表。所以你可能想要使用它，或者查看它的代码来了解它在做什么。
@DFL 很高兴它有帮助。我编辑了我的原始答案，如果您愿意投票和/或将其标记为已接受，我将不胜感激:)