HTML <input type='file'> File Selection Event

Moon picture Moon · Aug 20, 2010 · Viewed 214.5k times · Source

Let's say we have this code:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

which results in this:

image showing browse and upload button

When the user clicks the 'Browse...' button, a file search dialog box is opened:

image showing a file search dialog box with a file selected

The user will select the file either by double-clicking the file or by clicking the 'Open' button .

Is there a Javascript Event that I can use to be notified after after the file is selected?

Answer

Anurag picture Anurag · Aug 20, 2010

Listen to the change event.

input.onchange = function(e) { 
  ..
};