Q:

Jquery: change event to input file on IE

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?

A:

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.

A:

This is really late, but I was having the same problem, and I solved it by using a styled <label> tag with a slight workaround for Firefox.
http://jsfiddle.net/djibouti33/uP7A9/
The Goals:

allow user to upload a file by using standard html file input control
hide standard html file input control and apply own styling
after user selects file to upload, automatically submit the form

The Browsers:

Firefox, Chrome, IE8/9, Safari
IE7 didn't work, but it might if you add that browser to the workaround detailed at the bottom

The Initial Solution:

Hide the file input by positioning it offscreen. Important not to display:none as some browsers won't like this.
Add another styled element to the page (link, button). 
Listen for a click on that element, then programmatically send a click to the file input to trigger the native 'file explorer'
Listen for the file input's onchange event (occurs after a user chooses their file) 
Submit the form

The Problem:

IE: if you programmatically send a click to a file input in order to activate it (2), programmatically submitting the form (5) will throw a security error

The Workaround Solution:

Same as above
Take advantage of the accessibility features built in to the  tag (clicking on a label will activate it's associated control) by styling 
a  tag instead of a link/button
Listen for the file input's onchange event
Submit the form
For some reason Mozilla browsers won't activate a file input by clicking on it's .     
For Mozilla, listen for the click on the label and send a click event to the file input to activate it.

Hope this helps! Check out the jsfiddle for details on the html/js/css used to make it all work.

A:

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.

