6

As some of you may know already, Internet Explorer's onchange event is fundamentally broken prior to version 9. Instead of triggering when a change occurs, it triggers when the input field loses the focus and has changes.

This lead to various workarounds for checkboxes and radio buttons ("use onclick instead") and text fields ("use keyup instead").

However, I'm having that problem for a file input, and I can't figure out what I do to be notified that a new file has been selected, right after it did, and not when the user clicks elsewhere. I can't attach myself to a mouse event because it's not related to the mouse; and I can't attach myself to a keyboard event because it's not related to the keyboard either.

I'd be willing to use IE-specific stuff if it can solve the problem.

Additional infos:

I use jQuery 1.6 and the live method to attach the event.

$(".upload").live("change", function() { /* stuff here */ });
zneak
  • 134,922
  • 42
  • 253
  • 328
  • some chatter about this problem here: http://stackoverflow.com/questions/2389341/jquery-change-event-to-input-file-on-ie – Marc B Aug 24 '11 at 19:47
  • http://jsfiddle.net/c8JuC/1/ works on IE9 with IE7 emulated. – pimvdb Aug 24 '11 at 19:50
  • @pimvdb, I use `live` because I generate a bunch of inputs on-the-fly, and the event isn't fired at the right moment with it (jquery 1.6). – zneak Aug 24 '11 at 19:55
  • You'll experience problems with `onchange` event only if used on checkboxes and radios. I'm not sure what's the issue. – duri Aug 24 '11 at 19:55
  • @duri, the issue is that I have an `` with an `onchange` event that fires only when the user clicks somewhere else. – zneak Aug 24 '11 at 19:57

1 Answers1

3

Use the onFocus event, combined with a check to ensure that there is a value. This works because after the user selects a file and the OS file selection dialog box is removed, focus is returned to the input element.

Chris Baker
  • 49,926
  • 12
  • 96
  • 115