Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery: "change" event on file input element does not fire if the file selection is triggered by an element other than the file input

RE:

  • Jquery: change event to input file on IE
  • Any alternative to jQuery change() to detect when user selects new file via dialog box in IE8?

The above questions dealt with getting the 'change' event to fire consistently across browsers after a file selection has been made. This is has been resolved as evidenced by the example at http://jsfiddle.net/7wR2L/

My situation is a tad different. It seems this issue rears its ugly head in another context.

Based on design constraints, I have to use a non-file-input element ('a' tag) to trigger the "click" event on the file input element. So far from my tests, it looks like the file input is unable to fire a "change" notification when a file is selected in this way.

Please take a look at the example at http://jsfiddle.net/rudylattae/7wR2L/8/

Test environment(s):

Windows Server 2008 R2

  • Chrome 7.0.517.44 - PASS
  • Firefox 3.6.9 - FAIL
  • IE 8.0.7600.16385 64bit - FAIL

Windows XP Pro (2002 - SP3)

  • Chrome 8.0.552.28 beta - PASS
  • Firefox 3.5.14 - FAIL (does not even trigger the file selector)
  • IE 8.0.6001.18702 - FAIL
like image 247
Rudy Lattae Avatar asked Nov 10 '10 23:11

Rudy Lattae


1 Answers

With MSIE use the onpropertychange-Event, example: http://jsfiddle.net/7wR2L/14/

As jQuery does'nt support this event you have to assign it without jquery(inline or use attachEvent )

In other browsers try using mutation-events, maybe they'll work there. See a related topic on mutation-events from yesterday, to have a little example how they work: How to capture change on page title from a firefox extension

like image 93
Dr.Molle Avatar answered Sep 29 '22 23:09

Dr.Molle