在输入类型中选择多个文件时，只上传一个文件

Question

用户多次单击上传器上传多个文件（例如，a.txt，b.txt，c.txt），但服务器只能接收最后一个文件（c.txt）。还有其他什么需要实现多个文件上传器吗？

<form action="storeArticle" method="post" enctype="multipart/form-data">
    <input type="file" name="file[]" multiple >
    <input type="submit" name="submit" class="submit" id="submit" value="submit" />
</form>

==========
我想要实现的是https://stackoverflow.com/questions/ask。用户可以根据需要多次单击图像图标，最后所有图像都将被正确发送到服务器。

Answer 1

当你说他们多次点击上传器时，你的意思是每次都要打开文件浏览器添加一个文件吗？如果是这样，那么这将导致它丢失先前选择的其他文件。

解决此问题的方法是让用户ctrl / cmd +单击他们想要的每个文件，同时只打开文件浏览器一次。

文件输入甚至在您打开文件资源管理器时删除所选文件，然后按取消。

修改

只是一个想法，我正在打电话，所以我无法测试这个，但也许你可以玩它...

有一个从开始到结束的输入字段。当他们选择第一个文件时，按下按钮（最好使用<label>），他们点击不再打开该文件输入。而是添加动态文件输入并使属性的标签等于动态添加的文件输入。添加动态输入后，为其创建一个侦听器，以便当用户在该新输入中选择一个文件时，它将附加到原始input.files数组。一旦发生这种情况，该过程将重新开始，动态输入处理文件选择并在选择文件时将其传递给原始输入。

最好隐藏实际choose file按钮的原因是因为它有时会有点不一致。相反，使用带有输入元素id的label元素作为属性的标签可以保证单击标签将聚焦文件上载字段。

Answer 2

我打算将其添加为评论，但我无法做到。

您是否尝试过克隆输入并将其添加到表单中？

然后，当用户选择文件时，您可以添加新输入，添加新输入并隐藏＆＃34;填充＆＃34;一些，或添加新的输入并标记＆＃34;填充＆＃34;一些只读（你想添加一些方法来删除它们）。