Question

我正在创建文件（图片）上传表单。我想通过单击按钮添加输入元素。

这是我的意见：

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

我是alerady写了一些代码：

        <script language="javascript">
fields = 0;
function addInput() {
if (fields < 10) {
document.getElementById('text').innerHTML += "<input type="file" name="file"/><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>

但它很难看而且不起作用......

我有原型库，想用它来添加输入。

所以我需要一个按钮来添加给定的输入，并在每个输入附近的更多按钮上删除它 - 就像将文件附加到邮件时一样。

Answer 1

[See it in action]

<强> HTML

<div id="text"></div>
<div id="warning"></div>

<强>的Javascript

fields = 0;

function addInput() {
  if (fields < 10) {
    var id = "file" + fields;
    document.getElementById('text').innerHTML +=
      "<div><input type='file' name='"+id+"' />" +
      " <a href='#' onclick='removeInput(this.parentNode)' />remove</div>";
    fields += 1;
  } else {
    document.getElementById('warning').innerHTML =
      "Only 10 upload fields allowed.";
    document.form.add.disabled = true;
  }
}

function removeInput( el ) {
  if (fields > 0) {
    document.getElementById('warning').innerHTML = "";
    var parent = document.getElementById('text');
    parent.removeChild(el);
    fields -= 1;
  }
}

Answer 2

我认为使用"

会出现问题

document.getElementById('text').innerHTML += "<input type="file" name="file"/><br />";

应该是

document.getElementById('text').innerHTML += "<input type='file' name='file'/><br />";

删除字段

 document.getElementById('text').innerHTML += "<div id='div_"+fields+"'><input type='file' name='file'/><br /><a onclick='removeDiv(/""+fields+"/")' href='javascript:void(0)'>Remove</a></div>";

并添加javasript函数

function removeDiv(val)
{
  var d = document.getElementById('text');
  var olddiv = document.getElementById("div_"+id);
  d.removeChild(olddiv);
  fields-=1; //this should be done to decrement count
}

原型：添加/删除输入元素

2 个答案:

[See it in action]