3

我正在制作一个上传表单，如果他们想要上传多个文件，我希望用户在需要使用 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>
4

2 回答 2

3

您没有选择<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>

JS

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

​</p>

于 2012-05-31T23:42:37.307 回答
1

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

我相信你想要类似的东西$(this).parent().prev().clone()

于 2012-05-31T23:41:57.763 回答