如何让用户上传多个图像而无需预先定义HTML上传输入框的数量？

Question

我正在寻找一种方法让用户上传尽可能多的图片（可能通过拖放）或动态添加更多上传框。

我认为静态修复（例如6）HTML上传输入框略有限制，用户必须单击“浏览”按钮（在此示例中为6次）并导航到该文件夹​​以选择文件。

实现此目的的最佳做法是什么，以便用户发现它易于使用？也许有一些AJAX魔术？

我也不介意让用户点击“上传更多”来显示（再说6个）HTML上传输入框。想知道是否有更好的方法！

谢谢。

Answer 1

您可能还想查看类似Plupload

的内容

Answer 2

您已经找到了最佳答案 - 在需要时动态地向页面添加更多文件输入。

HTML文件输入不允许您一次选择多个文件。你也不能从图形文件浏览器中“拖放”（如果这就是你的意思）。

但是你可以动态添加（或显示）更多。你不需要“AJAX”来做这件事，只需要Javascript。

如果你有这样的原始输入

<div id="container">
    <input type="file"/>
</div>

您可以使用以下脚本添加另一个：

var container = document.getElementById("container");
var newFile = document.createElement("input");
newFile.type = "file";
container.appendChild( newFile );

要处理服务器上的文件，您需要查看Request.Files。它们将按照添加它们的物理顺序列在集合中。