Javascript添加文件输入框按钮麻烦答案

【问题标题】：Javascript add file input box button troubleJavascript添加文件输入框按钮麻烦
【发布时间】：2014-11-21 19:55:51
【问题描述】：

我正在构建一个多文件上传器，并希望使用带有 java 脚本的
在新行上开始每个输入。

我正在尝试做的是将每个新盒子放在彼此下方，而不是彼此相邻排列。有人可以告诉我要添加到 java 脚本中的内容，以便它创建一个元素
.

我尝试将它们添加到 javascript 函数的末尾，但它没有工作

var txt = document.createElement('br');
AND
txt = document.createElement('br');
AND
txt.element ="<br>";

我有一个多上传器，这是代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> :: FILEUPLOAD :: </title>
</head>

<body>
<form name="form" method="post" enctype="multipart/form-data">
  <div id="files">
      <input type="file" name="item_file[]">
  </div>
  <a href="javascript:_add_more();" title="Add more">+</a>
</form>

<script language="javascript">
<!--
function _add_more() {
    var txt = document.createElement('input');
    txt.type="file";
    txt.name="item_file[]";
    document.getElementById("files").appendChild(txt);
}
</script>
</body>
</html>

感谢您的帮助

【问题讨论】：

你appendChild br 元素了吗？
您可以将每个元素包装在一个 div 中，也可以添加一个包含 display: 块的 css 类。看到这个fiddle。
@ThiagoNegri Iv 从未听说过，我将如何将它用于盒子？
@ThiagoNegri，我使用了这个 txt.appendChild(document.createElement("br")); 但似乎不起作用。
@PiotrŁużecki 仅当这些是页面上的唯一输入或所有输入都应被阻止时才有效。向文件输入中添加类更安全。

标签： javascript function upload element

【解决方案1】：

为每个输入添加一个类：

function _add_more() {
  var txt = document.createElement('input');
  txt.type="file";
  txt.name="item_file[]";
  txt.className="file-picker";
  document.getElementById("files").appendChild(txt);
}

然后将 display: 块添加到您的 css 中：

input.file-picker
{
  display: block
}

这个fiddle中的工作版本。

编辑：您可能还想为 CSS 类添加底部填充。

【讨论】：