Javascript 单击上一个字段时将字段动态添加到我的表单

所以，我要做的就是添加多个文本字段并上传多个文件。用户应该只看到1个上传字段，直到单击它，并且它正在浏览文件。文本字段也是如此。当用户单击或开始在文本字段中键入时，将出现下一个。到目前为止，我还没有实现我的目标。我刚刚开始使用JavaScript，所以我的代码严重受损，甚至不值得发布

做这件事的不同方式是什么？你知道其利弊吗

编辑：这是我尝试的许多方法之一

<form name="form">
<label for="file">Filename:</label>
<input type="file" name="file[0]" id="file[0]" onclick="addForm()" />
</form>
<br />

<script type="text/javascript">

var part1 = '<label for="file">Filename:</label> <input type="file" name="file[';
var part2 = ']" id="file[';
var part3 =']" onclick="form()" /><br />'

var counter = 0;

function addForm()
{

if (document.form.file[counter].click) 
{
        document.write(part1 + counter + part2 + counter + part3);
        counter++;

}
}
</script>

文件名：


var part1='文件名：
'
var计数器=0；
函数addForm（）
{
if（document.form.file[计数器]。单击）
{
文件。书写（第1部分+计数器+第2部分+计数器+第3部分）；
计数器++；
}
}

假设您有以下HTML：

<form id="myForm">
   <input type="text" />
   <input type="file" />
   <!-- the JS won't affect this element -->
   <input type="submit" />
</form>

您可能使用的javascript的一个相当简化的版本如下所示：

var formElement = document.getElementById("myForm");
var children = e.getElementsByTagName("input");
var allowedTypes = new Array("text", "", "file");
// note the empty string - it stands for the default "text" type
for(var i=0; i<children.length) {
   var input = children[i];
   if(0 > allowedTypes.indexOf(input.attributes.getNamedItem("type").value)) {
      input.onFocus = function() {
         formElement.innerHTML += input.outerHTML;
         input.onFocus = null;
      }
   }
}

var formElement=document.getElementById（“myForm”）；
var children=e.getElementsByTagName（“输入”）；
var allowedTypes=新数组（“文本”、“文件”）；
//注意空字符串-它代表默认的“文本”类型
for（var i=0；i allowedTypes.indexOf（input.attributes.getNamedItem（“type”）.value））{
input.onFocus=函数（）{
formElement.innerHTML+=input.outerHTML；
input.onFocus=null；
}
}
}

这可以在更复杂的示例中派生，比如为新输入添加了容器，这样它们就不会总是出现在表单的末尾。我也会考虑和你一起工作。当然，这是我个人的观点，但它节省了我大量的时间和编码。

这里有一个快速解决方案：

当为当前活动的文件输入选择一个文件时，它将添加一个新的文件输入，然后它将禁用当前文件输入，因此一次只启用一个文件输入

HTML

---

如果你不愿意展示你的代码（我们甚至可以处理并改进坏代码），那么我们为什么要费心去帮助你呢？此外，请不要在问题中使用不必要的亵渎。1）变量和函数的名称相同。该函数将替换变量。2）

document.write（var表单）

不是有效的javascript。它可能是

document.write（form）

，但您需要更改函数名或变量名，使它们不匹配。3）

document.write

将传递的文本添加到文档末尾，这样它就不会添加到表单元素中。使用

appendChild

4）我相信您所有的标签都会指向第一个文件输入。您最好不要使用标签上的

for

属性，而是将文件输入嵌套在其中。谢谢大家=）我觉得我应该进一步学习JavaScript的基础知识，：P直到下次！正是我要找的！谢谢不客气。如果它回答了您的问题，您可以将其标记为：）

<form id="fups" name="form">
<label>
    Filename: <input type="file" name="file[]" />
</label>
</form>​

var fups = document.getElementById("fups");
var file = document.form['file[]'];

fups.onchange = function(){
    file.disabled = true;
    var inp = document.createElement("input");
    inp.type = "file";
    inp.name = "file[]";
    var lab = document.createElement("label");
    lab.innerHTML = "Filename: ";
    lab.appendChild(inp);

    fups.appendChild(lab);
    file = inp;
};