Question

所以，我要做的是添加多个文本字段并上传多个文件。用户在点击它之前应该只看到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>

Answer 1

以下是一个快速解决方案：http://jsfiddle.net/JTDZR/

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

HTML

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

JS

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;
};

Answer 2

假设你有这个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;
      }
   }
}

这可能来自一个更复杂的示例，例如为新输入添加容器，因此它们不会总是出现在表单的末尾。另外，我会考虑使用jQuery。当然，这是一种个人观点，但它为我节省了大量的时间和编码。

单击上一个字段时，向我的表单动态添加字段

2 个答案: