html动态输入类型,Javascript/HTML：如何动态添加各种输入类型并在服务器端接收它们？...

如果问题很长，请原谅，但作为一名程序员(对JavaScript和HTML不太熟悉)，我知道这对专业人士来说很容易。此外，我还用实际网页的照片详细记录了问题。

我正在用html/javascript制作一个网页(用作python/flask/jinja应用程序的模板)。其中，场景如下：

场景A

用户打开网页上传文件。页面显示如下内容：

当用户单击“添加另一个文件”时，会添加更多文件上载输入，如：

用于执行此操作的代码是：

var counterFile = 1;

function addFile(){

var item1 = document.getElementById("UploadedFile1");

var cloned = item1.cloneNode(true);

counterFile = counterFile + 1;

cloned.setAttribute("id", "UploadedFile" + counterFile);

var sectiondiv = document.getElementById("UploadFileSection");

sectiondiv.appendChild(cloned);

linebreak = document.createElement("br");

sectiondiv.appendChild(linebreak);

}

现在我如何接收另一边的文件？我可以制作一个数组，这样我就不必单独接收文件了吗？如何设置相同的计数器？你知道吗

场景B

上一节中上载的文件将被存储，并将参考号提供给用户以供以后使用。然后，用户可以对上传文件的这些数据进行操作。你知道吗

现在，用户将看到一个选项，可以通过如下列表框操纵自己的选择：

用于动态添加另一个筛选器的代码与前一个相同。现在假设用户选择选项1(将有15-16个这样的选项)。现在，将在选项列表旁边添加新的输入，以获取用户关于如何基于选项1操作数据的输入(例如，选项1可以使用户仅显示特定日期之间的数据)。在选项2中，用户可能希望显示包含特定单词的数据。因此，当用户选择一个选项时，要添加的新输入的数量将随所选选项的类型而变化。你知道吗

如何动态添加这些新输入？再说一遍，如何在服务器端接收它们？