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

Question

RE:

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

Thanks to SO I woudln't have stumbled across this and would have continued laboriously, confident that I could make it work. — Robin Maben
– Robin Maben, Commented Aug 24, 2011 at 13:04

Community · Accepted Answer · 2017-05-23 12:09:11Z

7

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

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Nov 11, 2010 at 0:34

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cool Over a year ago

change is working fine. but in change event if I try to submit the form using jQuery('#mediapicker #edit-submit').click(); the file field become empty and form not submitting. please help.

yesnik · Accepted Answer · 2014-09-05 05:10:58Z

0

Try to use modern version of jQuery.

Described problem with change event in Internet Explorer was fixed in jQuery >= 1.6.4.

answered Sep 5, 2014 at 5:10

yesnik

4,7933 gold badges32 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related