如何让用户上传多张图片而不预先定义HTML上传输入框的数量？

Posted 2023-03-05

【中文标题】如何让用户上传多张图片而不预先定义HTML上传输入框的数量？

【英文标题】：How to let user upload multiple images without pre-defining the number of HTML upload input box?

【发布时间】：2011-05-17 14:26:24

【问题描述】：

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

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

实现这一点的最佳做法是什么，以便用户觉得它易于使用？也许有一些 AJAX 魔法？

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

谢谢。

【参考方案1】：

您可能还想查看Plupload 之类的内容

【讨论】：

这最适合我的场景，因为我希望用户进行批量上传。谢谢 Rfvgyhn！

【参考方案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。它们将按添加时的物理顺序列在集合中。