Question

我在上传多张图片时遇到问题，因为当我一次只选择一张图片时，文件数组会被覆盖。

以下是我使用的HTML：

<input type="file" id='files' name="files[]" multiple/>

我使用Javascript来显示所选图片，并且如果必须，我会向用户提供删除它们的选项。

现在让我们假设您选择一个要上传的图片，然后选择一个图片，Javascript将显示两个图片。但是当我使用它时：

$("#files")[0].files

它只显示一个文件，因为整个数组被覆盖，因为用户不是一次选择两个图像，而是分开。那么如何让用户分别选择两个图像并仍然获得整个列表？

Answer 1

你必须分别在内存中管理它。一个字段不会存储以前存储的值。就像文本输入字段在您输入新值时不会记住以前的值一样。请参阅Reading client side text file using Javascript（您必须根据二进制数据进行调整。请参阅https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer和Convert blob to base64）

或者，在用户选择文件后，动态创建新文件输入。

Answer 2

您是否可以利用push方法将每个图像附加到数组中，然后根据需要弹出它们？基本上，迭代数组。如果他们选择了两个文件，它将执行推送，推送和完成。

如果他们一次上传一张图片，同样的事情会发生得更慢。