在按钮单击时生成多个表单 - PHP/Javascript答案

【问题标题】：Generate multiple forms on button click - PHP/Javascript在按钮单击时生成多个表单 - PHP/Javascript
【发布时间】：2018-08-06 18:38:30
【问题描述】：

我正在做一个项目。我有一个表单，用户可以在其中上传文件。我想做一个 php 函数，允许用户上传更多文件。

换句话说，我需要一种技术，我可以通过这种技术将表单多次显示在另一个下方。

<form action="action.php" method="post" >
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">

我希望用户自己根据他的文件数生成表单，而不是重复复制粘贴相同的表单，他想上传！

换句话说，我需要在单击按钮时生成上述代码行的脚本（PHP 或 JAVASCRIPT）。

示例：如果用户要上传 3 个文件，他将单击 3 次按钮，三个上传文件字段将显示，如图所示。

感谢您的帮助。我真的很感激！

【问题讨论】：

对不起。我错过了最后的标签 :)
如果您错过了，请编辑帖子并将其添加到那里，而不是在评论中。此外，您应该包括您尝试的代码示例。
还有……你试过什么？ SO 不是“为我写一些代码”之类的地方。我们帮助回答您在您编写的代码方面遇到的问题

标签： javascript php

【解决方案1】：

这是你的做法：

function generateForm() {

  var f = document.createElement("form");
  f.setAttribute('method', "post");
  f.setAttribute('action', "action.php");

  var i = document.createElement("input"); //input element, text
  i.setAttribute('type', "file");
  i.setAttribute('name', "fileToUpload");
  i.setAttribute('id', "fileToUpload");

  var s = document.createElement("input");

  s.setAttribute('type', "submit");
  s.setAttribute('value', "Upload");
  s.setAttribute('name', "submit");

  f.appendChild(i);
  f.appendChild(s);

  document.getElementsByTagName('body')[0].appendChild(f);

}

generateForm();

&lt;button onclick="generateForm()"&gt;Add more files&lt;/button&gt;

【讨论】：

【解决方案2】：

我认为您真正想要的是一种包含多个文件上传字段的表单。

首先，让我们创建一个添加另一个表单的函数。

您可以使用 JavaScript 函数 document.createElement 创建新的 DOM 元素，例如 <input> 和 <form>。

您可以使用.appendChild，一种HTML DOM 对象的方法，将该方法的参数添加到调用它的元素中。（例如，a.appendChild(b) 将 b 追加到 a。

使用它，我们可以创建一个函数

制作表格
进行输入
将输入添加到表单中
将表单添加到正文中

因此，我们生成的代码如下

function addInputToForm() {
  const form = document.createElement("FORM")
  const input = document.createElement("INPUT")
  const submit = document.createElement("INPUT")
  
  form.appendChild(input)
  form.appendChild(submit)
  
  document.body.appendChild(form)
  
  input.type = "file"
  submit.type = "submit"
  
  submit.value = "Upload File"
}

&lt;button onclick="addInputToForm()"&gt;Add upload field&lt;/button&gt;

【讨论】：

【解决方案3】：

试试这个：-

<form action="action.php" method="post" >
    <input type="button" value="Add more files" id="addFileFieldBtn"  />
    <div class="fileUploadField"><input type="file" name="fileToUpload[]" /></div>
    <input type="submit" value="Upload Image" name="submit">
</form>

<script>
$(document).on("click", "#addFileFieldBtn", function(){
    var fileFields = $('.fileUploadField');
    fileFields.last().after('<div class="fileUploadField">'+fileFields.first().html()+'</div>');
});
</script>

您将在服务器端获得一组文件。

【讨论】：

【解决方案4】：

只需在您的表单下添加一个button，并在其中添加一个加号：
<button onClick="addform()">+</button>

并添加js添加新表单：

<script>
    function addform(){
        code = "<form action="action.php" method="post" ><input type="file" name="fileToUpload" id="fileToUpload"><input type="submit" value="Upload Image" name="submit"></form>
        newForm = document.createElement('form');
        newForm.innerHTML = code;
        document.getElementByID('formContainer').appendChild(newForm)
   }
</script>

【讨论】：