如何分别选择多个图像？

我在上传多张图像时遇到问题，因为当我一次只选择一张图像时，文件数组被覆盖。如何分别选择多个图像？

这里是我使用的HTML：

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

我使用JavaScript来显示所选择的图像和我给用户，如果他们一定要删除的选项。

现在让我们假设你选择一个要上传的图片，并选择其中一个之后，以及，JavaScript的会显示两个图像。但是，当我使用此：

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

它仅显示一个文件，因为整个阵列而不立刻改写作为用户选择的两个图像，但分开。那么，如何让用户分别选择两张图像并仍然可以获取整个列表？

来源

2017-02-23 Mihael Keehl

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

另外，用户选择文件后，动态地创建一个新的文件输入。

来源

2017-02-23 16:14:34

谢谢你的回复快胡安！创建一个新的文件输入是一个想法，但它会看起来有点丑陋，所有应有的尊重。有没有办法获取该文件数据，然后将其暂时存储在不同的变量/列表中？ –

我试过了，它在控制台中完整地显示了文件，但是必须使用该数据使用Ajax调用来发送数据。所以它会使用$（“＃files”）[0] .files得到列表并遍历它或类似的东西，所以我可以使用XHR发送每个文件。二进制数据是唯一的方法吗？ –

您可以使用http://stackoverflow.com/questions/18650168/convert-blob-to-base64 –

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

如果他们上传一次在一个图像，同样的事情只会更慢发生。

来源

2017-02-23 16:16:55 boymeetscode

谢谢你的回答。也许，有没有办法将所有的数据都存储在数组中的某个地方？因为它最终会发送到Ajax以将其添加到发布请求中。 –

没有看到你想要对图像做什么，很难告诉你如何*。但我想你可以使用一个简单的for循环。喜欢的东西： VAR myArray的=新的Array（）图像中的文件： myArray.push（图）这当然是伪代码，你必须去适应的JavaScript。我从来没有用文件做过。但是，如果你上传多个文件，它们已经在一个名为files []的数组对象中。 – boymeetscode

如何分别选择多个图像？

回答

相关问题