Question

我正在制作一个上传表单，我希望用户在表单中添加更多输入文件字段，如果他们需要使用jquery，如果他们想要上传多个文件。这是我到目前为止的代码无法正常工作。你也可以在js小提琴上看到这个：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>

Answer 1

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

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>

<强> JS

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

Answer 2

看起来你正试图选择一些不存在的东西。 $('#add-more-files').prev()将是一个空的jQuery对象。 $.prev()选择之前的兄弟，其中没有给出您提供的选择器。

我相信你想要像$(this).parent().prev().clone()

这样的东西

用jquery克隆文件上传输入字段

2 个答案: