javascript - 如何添加多个不同名称的输入框

Question

我试图制作一个按钮，以便在每次单击时添加另一个输入框，但我也希望它在输入名称的末尾添加一个递增的数字。我有这段代码来添加更多输入。

<script type="text/javascript">
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += "<input type=\"file\" name=\"photo\" />";
}
</script>

我该怎么做才能使每次添加新表单时都会在 name="photo"末尾添加一个更高的数字，以便我可以使用我的 php 脚本正确处理图像？

默认形式为:

 <input type="file" name="photo">

但我想在每次进行新输入时在照片末尾添加一个数字以获得这样的输出。

 <input type="file" name="photo">
 <input type="file" name="photo2">
 <input type="file" name="photo3">
 <input type="file" name="photo4">

等等

Answer 1

您可以在表单名称中使用 []，然后您的 php 脚本会自动将这些输入转换为数组，这样您甚至不必再担心附加数字了。

<input type="file" name="photo[]">

如果您想使用 javascript 来完成此操作，最简单的方法是使用一个变量来跟踪输入数量

var inputNumber = 0;
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += "<input type=\"file\" name=\"photo\"" + inputNumber + " />";
    inputNumber++;
}