Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the workaround for onchange with file inputs?

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 */ });
like image 451
zneak Avatar asked Aug 24 '11 19:08

zneak


1 Answers

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.

like image 130
Chris Baker Avatar answered Nov 13 '22 01:11

Chris Baker