如何分别选择多张图片？答案

【问题标题】：How to select multiple images separately?如何分别选择多张图片？
【发布时间】：2017-02-23 16:12:18
【问题描述】：

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

这是我正在使用的 HTML：

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

我正在使用 Javascript 来显示选定的图像，并且如果用户必须删除它们，我会为用户提供删除它们的选项。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

感谢胡安的快速回复！创建一个新的文件输入是一个想法，但恕我直言，它看起来有点难看。有没有办法获取该文件数据，然后将其临时存储在不同的变量/列表中？
我试过了，它在控制台中完整地显示了文件，但必须使用 Ajax 调用使用该数据发送数据。所以它将使用 $("#files")[0].files 获取列表并对其进行迭代或类似的东西，这样我就可以使用 XHR 发送每个文件。二进制数据是唯一的方法吗？
您可以将二进制数据转换为使用stackoverflow.com/questions/18650168/convert-blob-to-base64编码的base 64
天哪，这行得通！谢谢你一百万次胡安！！！我为此苦苦挣扎了好几个小时！！

【解决方案2】：

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

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

【讨论】：

感谢您的回答。是的，也许，有没有办法获取所有这些数据并将其存储在数组中的某个位置？因为它最终会被发送到 Ajax 以将其添加到 post 请求中。
如果没有看到您要对图像做什么，很难告诉您如何。但我认为你可以使用一个简单的 for 循环。类似于： var myArray = new Array() for image in files: myArray.push(image) 这当然是伪代码，你必须适应 javascript。我也从来没有对文件做过这个。但是，如果您上传多个文件，它们已经在一个名为 files[] 的数组对象中。