jQuery insert file input onChange error

Question

I have the following code:

HTML

<label>File Upload: </label>
<input type="file" name="file[]" />

jQuery

$('#property_enquiry input[type=file]').change(function() {
    $('<input type="file" name="file[]">').insertAfter("input[type=file]");
});

What I want to happen is once the first file is added a new input is added underneath the current one. The above code works when adding the first file to create a second input, however when adding a second file a third input isn't created.

Arnaud Le Blanc · Accepted Answer · 2011-08-22 20:56:01Z

1

Try this:

$('#property_enquiry input[type=file]').live('change', function() {
    $('<input type="file" name="file[]">').insertAfter("input[type=file]:last");
});

This will automatically work with newly added file inputs.

Try it here: http://jsfiddle.net/Lgmcz/

edited Aug 22, 2011 at 20:56

answered Aug 22, 2011 at 20:50

Arnaud Le Blanc

100k24 gold badges211 silver badges196 bronze badges

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

4 Comments

lethalMango Over a year ago

Thanks, just tried that. It seems to do it in multiples, once the first input is filled it adds a second form. When adding a second file to the input it then duplicates the first two inputs (including file names) and adds a new field at the bottom of that.

Arnaud Le Blanc Over a year ago

use .insertAfter("input[type=file]:last");

lethalMango Over a year ago

Bingo, works like a charm. Thanks a lot, saved me hours of messing! :)

guettli Over a year ago

Works in Firefox. But in my IE7, the change events happens after clicking on "submit". Then the new input appears, and you need a second press to submit the form (jquery 1.4.4). Related: stackoverflow.com/questions/2389341/…

Collectives™ on Stack Overflow

jQuery insert file input onChange error

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related