javascript - 如何让用户通过点击添加另一个上传输入？

Question

我一直在用这个:

http://plugins.krajee.com/file-basic-usage-demo

这是一个文件上传小部件，我想知道如何制作它以便用户可以单击一个按钮并生成另一个文件上传输入(但有一个隐藏的限制，比如 10)。所以，比如说，我有以下内容:

<div class="form-group row">
    <label for="file1_recipient" class="col-xs-2 col-form-label">Upload Photo (1)</label>
    <div class="col-xs-10">
        <input id="file1_recipient" type="file" class="file">
    </div>
</div>

我希望用户点击并获得:

<div class="form-group row">
    <label for="file1_recipient" class="col-xs-2 col-form-label">Upload Photo (1)</label>
    <div class="col-xs-10">
        <input id="file1_recipient" type="file" class="file">
    </div>
</div>

<div class="form-group row">
    <label for="file2_recipient" class="col-xs-2 col-form-label">Upload Photo (2)</label>
    <div class="col-xs-10">
        <input id="file2_recipient" type="file" class="file">
    </div>
</div>

如果他们再次点击，他们会得到 3 个，依此类推，直到 10 个。如何做到这一点？

Answer 1

id document 中的元素应该是独一无二的。您可以删除 id从初始 <input type="file">元素，使用 .clone() , .last() , .insertAfter()创建原始元素的克隆并将克隆的元素附加到 document在最后.form-group之后元素。您可以创建一个变量，例如 var limit = 10 .当10点击注册集button disabled属性为 "disabled" , 调用 .off("click")在button .您可以使用 .text(function) , .replace()增加克隆 <label> 括号内的数字带有 current + 1 的元素, 其中current变量是递增的直到从0开始直到 limit : 10到达 click事件处理程序。

$(function() {
  var limit = 10;
  var current = 0;
  $("button").on("click", function() {
    if (++current < limit) {
      $(".form-group").last().clone()
      .find("label")
      .text(function(_, text) {
        return text.replace(/\d+/, current + 1)
      })
      .end()
      .insertAfter(".form-group:last");
    } else {
      $(this).off("click").prop("disabled", "disabled");
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add File</button>
<div class="form-group row">
  <label for="file1_recipient" class="col-xs-2 col-form-label">Upload Photo (1)</label>
  <div class="col-xs-10">
    <input type="file" class="file">
  </div>
</div>