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

问题描述:

用户点击上传器多次上传多个文件(例如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://*.com/questions/ask。用户可以多次点击图像图标,最后所有的图像将被正确发送到服务器。

当你说他们多次点击上传者,你的意思是不得不每次打开文件资源管理器来添加一个文件?如果是这样,那么这将导致它丢失先前选择的其他文件。

解决这个问题的方法是让用户在只打开一次文件浏览器时按住ctrl/cmd并单击他们想要的每个文件。

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

编辑

只是一个想法,我在手机上,所以我不能对此进行测试,但也许你可以玩它...

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

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

+0

我已向我的问题添加了详细信息。 – user7328234

+0

好的,保存文件直到点击提交按钮并一次上传全部文件?我不相信有一种方法可以做到这一点,因为当您使用PHP上传文件时,文件输入必须能够访问实际的文件。你需要tmp文件给你的服务器映像。我相信文件输入具有这种信息的唯一方式是如果图像在其文件数组内。 – SidTheBeard

+0

@SSidTheBeard除了文件输入外,是否有任何方法通过多次单击相同的图标来保留所选文件(如https://*.com/questions/ask),然后将所有文件发送到服务器。 – user7328234

To upload multiple files you have to select multiple files at once by pressing on ctrl(windows) or cmd(mac) button and then press submit button. 
I think in your case you have clicked the uploader button multiple times and each time you have selected only on file and in the end you have clicked the submit button so it will upload only the last file you have selected. 

我打算将此添加为评论,但我不能。

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

然后,当用户选择一个文件,你可以添加新的输入,添加新的输入并隐藏“填充”的输入,或者添加新的输入并将“填充的”标记为只读(你会想添加一些方法来删除它们)。