-1

我目前有一个小表单，用户可以在其中选择一系列文件。我有一个提交按钮和另一个按钮，同时创建另一个文件元素。我要做的就是在提交按钮上方而不是在提交按钮下方弹出每个新文件元素。这就是我迄今为止所拥有的。

<div id="main">
    <div class="container">
    <form action="<?php echo htmlspecialchars($_SERVER['PHP']);?>" method="post" enctype="multipart/form-data" name="upload_form" id="upload_form">
    <br />
    <input type="file" name="file"/>
    <input type="button" onclick = 'javascript: add()' value="ADD ANOTHER FILE" />
    <br />
    <input type="submit" id="submit" name="submit" value="SUBMIT" />
    </form>
    </div>
</div>

Javascript：

<script>
function add()
{
    var br = document.createElement("br");
    var foo = document.getElementById("upload_form");
foo.appendChild(br);
    form = document.getElementById("upload_form");
    input = document.createElement("input");
    input.type="file";
    input.name="file[]";
    form.appendChild(input);
}
</script>
4

2 回答 2

2

您可以使用parentElement.insertBefore(newChild, existingChild)：

此方法将在“添加按钮”上方添加新元素，而不是像您指定的那样在提交按钮上方添加新元素。

HTML：

<input id="addbutton" type="button" onclick = 'javascript: add()' value="ADD ANOTHER FILE" />

Javascript：

    var form = document.getElementById("upload_form");
    var addButton = document.getElementById('addbutton');

    var br = document.createElement("br");
    form.insertBefore(br, addButton);

    form = document.getElementById("upload_form");

    input = document.createElement("input");
    input.type="file";
    input.name="file[]";
    form.insertBefore(input, addButton);

看起来您的表单可能存在一些布局问题。最好不要使用<br>每行的包装元素，而是使用 CSS 样式。这样，您也只能使用insertBefore一次（用于包装器）并且它不会那么混乱。

另外，如果您不知道，您应该查看jQuery。这种 DOM 操作曾经是它的主要优势之一。

于 2013-09-10T17:03:07.537 回答
2

您可以使用insertBefore，它在您指定的现有子节点之前插入一个节点作为子节点。

当您想在submit按钮之前插入时，请使用此代码

form = document.getElementById("upload_form");
var foo = document.getElementById("submit"); 
form.insertBefore(br,foo);
于 2013-09-10T17:03:36.010 回答