Inserting file input element using jQuery

Question

I'm having trouble inserting file input elements with jQuery. What I want to happen is when a user selects a file using the input element, jQuery should hide that input and insert a new file input in its place.

Here's my relevant markup:

<div id="select_images">
    <input type="file" name="images[]" multiple="multiple" />
</div>

And my Javascript:

$('#select_images input').change(function(){
    // User selected some images to upload, hide this file input
    $(this).css('right', '-10000px');

    // Insert a new file input to take its place
    $('#select_images').append('<input type="file" name="images[]" multiple="multiple" />');
});

It kind of works. When I select a file using the file input already on the page, jQuery hides it and inserts a new one. When I try to do the same again however, jQuery does not insert a new file input.

I can't see any reason that the above code will only insert one additional file input, so I'm pretty stumped. I've confirmed this behaviour using both Firebug and POSTing the form data to my backend script.

Any help is appreciated. Thanks!

I guess my question is why do this? Knowing that might help with the solution... — Jason Gennaro
– Jason Gennaro, Commented Aug 23, 2011 at 19:41
Because I would like multiple file uploads from different directories without using something like Uploadify or SWFUpload. Using the multiple="" attribute only lets you add multiple files from the same directory. — John
– John, Commented Aug 23, 2011 at 19:50

Rafay · Accepted Answer · 2011-08-23 19:48:41Z

1

try using live

$('#select_images input').live('change',function(){...

when you dynamically add the elements to the DOM the event handlers do not automatically get attached to them, to attach the event handlers to the dynamically added elements you can use .live or .delegate

example with delegate

$("#select_images").delegate('input','change',function(){
//handler code here

});

.live

.delegate

When You Should Use jQuery’s Live and Delegate Methods

edited Aug 23, 2011 at 19:48

answered Aug 23, 2011 at 19:41

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

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

2 Comments

John Over a year ago

Works, thanks. Out of interest, why does this method work and the .change() method doesn't? Is the .change() method only allowed to fire once?

Jasper Over a year ago

.change() is short-hand for: .bind('change', function () {}) which only affects objects already in the DOM, when you dynamically add a new file input the .bind() will not affect it. Using .live() will affect the dom "now and in the future" as the documentation states. api.jquery.com/live . I would recommend using .delegate() however (api.jquery.com/delegate). $('#select_images').delegate('input', 'change', function () {});

Guffa · Accepted Answer · 2011-08-23 19:46:11Z

0

The new input that you have added doesn't have any onchange event handler. If you put the event handler in a named function, you can easily bind it to the new input that you create:

function handleChange(){
  // User selected some images to upload, hide this file input
  $(this).css('right', '-10000px');

  // Insert a new file input to take its place
  $('#select_images').append(
    $('<input type="file" name="images[]" multiple="multiple" />').change(handleChange)
  );
}

$('#select_images input').change(handleChange);

answered Aug 23, 2011 at 19:46

Guffa

703k111 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

Inserting file input element using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related