how does jquery detect a change to a file input element?

Question

I am building an image-upload feature into a web application and am using the following event handler:

$('input:file').change(function(){
    //handle input change
});

I have discovered that the handler is not called if I try to upload the same image twice, which makes sense because technically the input is not changing. But I am wondering, what needs to happen in order for the change to be triggered? Here are some examples of what I am looking for:

Change of filename
Change of file content regardless of filename
Change of filetype

Which of these would cause a file to be received as a changed file? Or are there other scenarios as well?

Filesize? File modified date? Extension?

DevlshOne
– DevlshOne

2014-06-16 14:13:44 +00:00
Commented Jun 16, 2014 at 14:13 — DevlshOne
– DevlshOne, Commented Jun 16, 2014 at 14:13

Shaunak D · Accepted Answer · 2014-06-16 14:33:17Z

5

Refer this Link.

Input type - File :

The onchange event is fired when the contents have changed. If the user types the path (does not use the Browse button) in Internet Explorer, then the onchange event is fired only when the element loses the focus. Therefore use the onpropertychange event to detect the modification in Internet Explorer.

MSDN reference

Fires when the contents of the object or selection have changed.

My test results :

Change of filename : Change fires.
Change of content : Keep the filename same, Change event does not fire.
Change of filetype : Keep the filename same, Change fires.
In IE 9,10, if you try to change the filename(in the input field), the change event is fired and the filename field is cleared.

So, moral of the story is, by content change they mean filename change.

edited Jun 16, 2014 at 14:33

answered Jun 16, 2014 at 14:14

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

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

1 Comment

one stevy boi Over a year ago

thanks @shaunakde, I didn't expect such a comprehensive and tested answer so quickly!

Collectives™ on Stack Overflow

how does jquery detect a change to a file input element?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related