Javascript 使用JQuery逐个添加元素

我正在尝试使用JQuery在表单中添加多个

div

标记：

以下是我的初始HTML表单：

<form action="" method="post">
            <div id="div_file0">
             <input type="file" name="files0[]" id="files0" multiple><br/>
            </div>
             <a href="#" id='more_files'>Click to add more files</a>
             After uploading multiple files, click Submit.<br>
             <input type="submit" value="Submit">
</form>

但是，新的

div

标记将替换现有内容，并在新创建的

div

元素中添加新的和旧的

input

标记

<form action="http://localhost:5000/api/upload_file" method="post">
            <div id="div_file1">
             <input type="file" name="files0[]" id="files0" multiple=""><br>
             <input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
            </div>

             <a href="#" id="more_files">Click to add more files</a>
             After uploading multiple files, click Submit.<br>
             <input type="submit" value="Submit">
        </form>

上传多个文件后，单击提交。

使用的Javascript如下所示：

<form action="http://localhost:5000/api/upload_file" method="post">
            <div id="div_file0">
             <input type="file" name="files0[]" id="files0" multiple=""><br>
            </div>
            <div id="div_file1">
             <input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
            </div>

             <a href="#" id="more_files">Click to add more files</a>
             After uploading multiple files, click Submit.<br>
             <input type="submit" value="Submit">
        </form>

<script type="text/javascript">
            $(document).ready(function() {
                $(document).on('click','#more_files', function() {
                var numOfInputs = 1;
                while($('#files'+numOfInputs).length) { numOfInputs++; }//once this loop breaks, numOfInputs is greater than the # of browse buttons
                console.log("numOfInputs:"+numOfInputs)
                $("<br/>").insertAfter("#div_file"+(numOfInputs-1));
                $("div")
                .attr("id","div_file"+numOfInputs)
                .insertAfter("#div_file"+(numOfInputs-1));

                var input = $("<input type='file' multiple/>")
                .attr("id", "files"+numOfInputs)
                .attr("name", "files"+numOfInputs+"[]");

                var remove = $("<a class='remove' href='#'>Remove file</a>")
                .attr("id","remove_file")
                .attr("name","remove_file"+numOfInputs)
                .attr("value",numOfInputs);

                $("#div_file"+numOfInputs).append(input,remove);
                });
            });
        </script>

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'更多文件'，函数（）上）{
var numOfInputs=1；
而（$（'#files'+numOfInputs）.length）{numOfInputs++}//一旦此循环中断，numOfInputs将大于浏览按钮的#
log（“numOfInputs:+numOfInputs）
$（“
”）.insertAfter（“#div_文件”+（numOfInputs-1））；
$（“div”）
.attr（“id”、“div_文件”+numOfInputs）
.insertAfter（“#div_文件”+（numOfInputs-1））；
变量输入=$（“”）
.attr（“id”、“文件”+NUMOF输入）
.attr（“名称”、“文件”+numOfInputs+“[]”）；
var remove=$（“”）
.attr（“id”，“删除文件”）
.attr（“名称”、“删除文件”+numOfInputs）
.attr（“值”，NUMOF输入）；
$（“#div_文件”+numOfInputs）.append（输入，删除）；
});
});

这相当多余，因为您已经在使用多个文件输入

如果确实希望以这种方式执行，则从要在DOM中重复的HTML内容中删除所有

id

属性。它们不是必需的，只是造成了更多不必要的复杂性。然后，您可以抓取第一个

.div_文件

元素，克隆它，并将其插入表单中

a

之前，如下所示：

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'更多文件'，函数（）上）{
var$clone=$（'.div_文件：first'）.clone（）；
$clone.insertBefore（'forma'）；
});
});



上传多个文件后，单击提交。

当您使用一个
多个
文件输入时，这一切似乎完全是多余的…？我需要多个输入文件，并且来自不同的位置。并且提供删除意外插入的文件的能力。这就是
多个
为您所做的，而不需要任何JS。无论是哪种情况，我都在下面添加了一个答案，告诉您如何克隆内容。它可以工作，需要等待7分钟我才能接受答案！但是，我想澄清一下，在这种情况下，“表单a”是什么？
form
中的
a
元素；
单击以添加更多文件
链接