使用jquery在表单中克隆文件上传输入字段答案

【问题标题】：Clone file upload input filed in form with jquery使用jquery在表单中克隆文件上传输入字段
【发布时间】：2012-06-06 05:55:06
【问题描述】：

我正在制作一个上传表单，如果用户需要使用 jquery 来上传多个文件，我希望他们可以在表单中添加更多输入文件字段。这是我到目前为止没有工作的代码。你也可以在 js fiddle 上看到这个：http://jsfiddle.net/benpaton/JUJxn/

提前致谢。

$(function () {
    $('#add-more-files').click(function() {
       var cloned = $(this).prev().clone();
       cloned.val(null);
       $(cloned).insertBefore($(this));
    });
});

<ul>
    <form enctype="multipart/form-data" action="" method="post">
        <li>Choose a file to upload:</li>
        <li><input name="uploadedfile" type="file" size="40" /></li>
        <li><a href="" id="add-more-files">Add file upload box</a></li>
        <li><input type="submit" value="Upload File" /></li>
    </form>
</ul>

【问题讨论】：

标签： javascript jquery file-upload input clone

【解决方案1】：

您没有选择<li> 元素。此外，您的锚点需要一个哈希值以防止它尝试解析 url

jsFiddle

HTML

<ul>
    <form enctype="multipart/form-data" action="" method="post">
        <li>Choose a file to upload:</li>
        <li><input name="uploadedfile" type="file" size="40" /></li>
        <li><a href="#" id="add-more-files">Add file upload box</a></li>
        <li><input type="submit" value="Upload File" /></li>
    </form>
</ul>

$(function () {
   //clone file upload box
   $('#add-more-files').click(function() {
      var cloned = $(this).parent().prev().clone();
      cloned.val(null);
      $(cloned).insertBefore($(this).parent());
   });
});

【讨论】：

【解决方案2】：

您似乎正在尝试选择不存在的内容。 $('#add-more-files').prev() 将是一个空的 jQuery 对象。 $.prev() 选择前一个兄弟，根据您提供的选择器，其中没有。

我相信你想要像$(this).parent().prev().clone()这样的东西

【讨论】：