javascript - Jquery: change event to input file on IE

Question

I have a form to upload files, and it should fire the submit after the file selection.

On FireFox/Chrome it goes well, and submits the form after file selection, but I can't do this on Internet Explorer.

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) { ... });

This input file is created on the fly; because of it I use .live() to bind the event.

Any suggestions?

question from:https://stackoverflow.com/questions/2389341/jquery-change-event-to-input-file-on-ie

Answer 1

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()
        {
            if($input.val().length > 0) {
              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.