STARIKOVS

Using a JavaScript you can process changes when user selects some files via input file. You can do this with help of change event.

It’s a short tip about change event of input of type file. I’ve recently looked for this event and it’s hard to gether that information fast. So, firstly, it’s a tip for myself and maybe it’ll be useful for others.

<form>
  <input type="file" multiple> 
  <input type="submit"> 
</form>

onchange

Occurs when a file or files have been selected in the dialog.

If the same files selected again the event isn’t fired.

In some browsers, Google Chrome for example, it occurs when you click “Cancel” in the dialog and the value is cleared. In FireFox, the event isn’t occured when “Cancel” is presssed and the value isn’t cleared. So, to clear the value of the input file you need to add another button that resets a value and this approach will work in all the browsers.

Here’s a simple jQuery example:

1
2
3

  $("[type='file']").bind("change", function () {
    alert("You've selected " + this.files + " files!");
  });

Also, it’s possible to trigger change event if you want:

  $("[type='file']").trigger("change");

oninput

It seems that input event works identically to change event. I haven’t tested yet.