How to detect input type=file "change" for the same file?

jquery html events cross-browser
Gadonski picture Gadonski · Nov 5, 2010 · Viewed 104.1k times · Source

I want to fire an event when the user select a file. Doing so with .change event it works if the user changes the file every time.

But I want to fire the event if the user select the same file again.

  1. User select file A.jpg (event fires)
  2. User select file B.jpg (event fires)
  3. User select file B.jpg (event doesn't fire, I want it to fire)

How can I do it?

Answer

BrunoLM picture BrunoLM · Nov 7, 2010

You can trick it. Remove the file element and add it in the same place on change event. It will erase the file path making it changeable every time.

Example on jsFiddle.

Or you can simply use .prop("value", ""), see this example on jsFiddle.

  • jQuery 1.6+ prop
  • Earlier versions attr

Related questions

How do you detect the clearing of a "search" HTML5 input?

In HTML5, the search input type appears with a little X on the right that will clear the textbox (at least in Chrome, maybe others). Is there a way to detect when this X is clicked in Javascript or jQuery …

Read More
jQuery: click event called $('textarea').val().trim().length times

Well, that's pretty much what happens. We've all seen this before: button becomes active and clickable only after we've put something in an input filed. I'm trying to implement that. I guess either I've gone the wrong way and I …

Read More
How to detect vertical scroll position using jquery?

Using jquery, how can you set an event that triggers when there is a vertical scroll visible, and when you change from top half of page to bottom half of page, and vice versa. So for example, if the vertical …

Read More