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?

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.