javascript - 如何分别选择多张图片？

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 )

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