Jquery: change event to input file on IE

Question

Hello guys, I already looked all around, and can't find a solution: I have a form to upload files, and it should fire the submit after the file selection.

On FF/Chrome it goes weel, and submit the form after file selection, but I can't do this on ie.

Already tried with click/propertychange but nothing happens. Some code I already tried:

$("#attach").attr("onChange", "alert('I changed')");

$("#attach").live($.browser.msie? 'propertychange': 'change', function(e) { ... });

Any sugestions to I try?

Thanks for any help

Edit1: I think there's a important information, this input file, is created on the fly, because of it I use .live() to bind the event

Answer 1

Format it like this:

$("#attach").change(function() { 
  alert('I Changed');
});

Update: After answering another question on this earlier, we realized this was fixed as part of the jQuery 1.4.2 event re-write, just update to the latest version to resolve the change event issue with <input type="file" /> in IE.

Answer 2

This has always worked for me in IE6 ad IE7.

$('#id-of-input-type-file').change(function(){});

Answer 3

I can confirm, at least that it only works after a blur event takes place, similar to a radio and checkbox in IE. I am probably going to have to add some kind of visual element for the user to click and tell me when they have picked their file.

lame.

Answer 4

This is likely a problem with a race condition with input fields in IE. By creating a separate thread to handle the UI changes the onChange should fire correctly in IE.

I solved a similar situation by doing the following inside my change handler:

if (jQuery.browser.msie) { setTimeout(DoSomeUIChange, 0); } else { DoSomeUIChange(); }

The DoSomeUIChange gets fired in a separate thread and so removes the race condition.

Answer 5

I know this is several months late, but I just ran into the exact same behavior in IE7; in all other browsers, the change event for file inputs happens after file selection. In IE7, it happens only if you trigger the file select again, or on blur.

Here's how I ended up fixing it:

var $input = $('#your-file-input-element');

var someFunction = function()
{
    // what you actually want to do
};

if ($.browser.msie)
{
    // IE suspends timeouts until after the file dialog closes
    $input.click(function(event)
    {
        setTimeout(function()
        {
            someFunction();
        }, 0);
    });
}
else
{
    // All other browsers behave
    $input.change(someFunction);
}

Technically you could/should filter the hack condition to just IE7, since IE8 behaves properly on the change event, but it also has the same behavior as IE7 on suspending timeouts while browser-related chrome is visible (I guess it considers it blocking I/O), so it works as-is.