Javascript 为每个输入文件选择多个图像

我有3个输入[type=file]允许用户上传3个图像，用户只能在每个输入上选择3个图像，但我尝试实现的是：

考虑用户点击第一个输入，现在用户可以选择1个图像，但若用户选择2或3个图像，我想发送第二个或第三个图像到下一个输入。例如，如果用户单击第一个输入，并选择3个图像，则第一个图像应设置为第一个输入，第二个图像应设置为第二个输入，以及第三到第三个输入。另外，如果单击第二个或第三个输入，它应该将每个图像发送到每个输入文件

函数imgtodatanput{ 如果输入.files&&input.files[0]{ var File=新文件读取器； File.onload=函数{ var Img=新图像； Img.onload=函数{ $+input.id+'-val'.valImg.src； $+input.id+'-preview'.attr'src'，Img.src.css'visibility'，visible'.fadeIn； }; Img.src=File.result； }; readAsDataURLinput.files[0]； } } $input[type='file'].eachfunction{ $this.changefunction{ 如果parseInt$this.get0.files.length>3{ alertYou最多只能上载3张图像； }否则{ imgToDatathis； } }; };

---

通过改变你的逻辑，你可以做到这一点。首先，您需要删除除第一个之外的所有输入，然后添加多个属性，然后像@Rory在评论中所说的那样动态创建预览和值，但您需要一个循环来为每个图像创建元素，但只需3次

函数imgtodatanput{ 如果$'img'。长度小于3{ 如果输入.input文件{ var length=input.files.length；

---

如果您不能以编程方式设置文件输入的值，那么您所要求的是不可能的。您需要删除输入上的多个属性，并强制用户单独选择每个文件。@Rorymcrossan但是我看到许多网站都这样做了，也使用了多个，所以这是可能的。您有这样的例子吗tes？即使用单个多文件输入，然后为其包含的每个文件附加新的li元素。它不使用不同的输入类型=文件控件并更新它们，因为正如我在第一条评论中提到的，这是不可能的。当然，您可以循环文件集合来创建元素并将它们附加到DOM中，如n还通过放置$this[0].files将选择限制为3个文件