Clone file upload input filed in form with jquery

Question

I am making an upload form and I want users to add more input file fields to the form if they require using jquery if they want to upload more than one file. This is the code I have so far below that isn't working. You can also see this on js fiddle: http://jsfiddle.net/benpaton/JUJxn/

Thanks in advance.

$(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>

Adam Rackis · Accepted Answer · 2013-05-22 17:49:44Z

3

You're not selecting the <li> element. Also, your anchor needs a hash to prevent it from trying to resolve a 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());
   });
});

edited May 22, 2013 at 17:49

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

answered May 31, 2012 at 23:42

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason · Accepted Answer · 2012-05-31 23:41:57Z

1

It looks like you're trying to select something that doesn't exist. $('#add-more-files').prev() will be an empty jQuery object. $.prev() selects the previous sibling, of which there are none given the selector you've supplied.

I believe you want something like $(this).parent().prev().clone()

answered May 31, 2012 at 23:41

Jason

52.7k38 gold badges139 silver badges188 bronze badges

Collectives™ on Stack Overflow

Clone file upload input filed in form with jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related