HTML input type file File Selection Event

Question

Let s say we have this code    lt form action    method  POST  enctype  multipart form-data  gt       lt input type  file  name  userFile  gt  lt br gt       lt input type  submit  name  upload btn  value  upload  gt   lt  form gt    which results in this     When the user clicks the  Browse     button  a file search dialog box is opened     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

User · Answer

jQuery way      input name myInputName    change function ev            your code

User · Answer

That s the way I did it with pure JS    x000D   x000D  var files   document getElementById  filePoster    x000D  var submit   document getElementById  submitFiles    x000D  var warning   document getElementById  warning    x000D  files addEventListener  change   function      x000D    if  files files length  gt  10    x000D      submit disabled   true  x000D      warning classList     warn  x000D      return  x000D      x000D    submit disabled   false  x000D      x000D   warning   x000D      text-align  center  x000D    x000D   x000D   warning warn   x000D   color  red  x000D   transform  scale 1 5   x000D   transition  1s all  x000D    x000D   lt section id  shortcode-5  class  shortcode-5 pb-50  gt  x000D       lt p id  warning  gt Please do not upload more than 10 images at once  lt  p gt  x000D       lt form class  imagePoster  enctype  multipart form-data  action   gallery imagePoster  method  post  gt  x000D           lt div class  input-group  gt  x000D          lt input id  filePoster  type  file  class  form-control  name  photo  required  required  multiple  multiple    gt  x000D        lt button id  submitFiles  class  btn btn-primary  type  submit  name  button  gt Submit lt  button gt  x000D           lt  div gt  x000D       lt  form gt  x000D   lt  section gt  x000D   x000D   x000D

User · Answer

Listen to the change event   input onchange   function e

User · Answer

When you have to reload the file  you can erase the value of input  Next time you add a file   on change  event will trigger   document getElementById  my input   value   null       that just erase the file path but do the trick

User · Answer

Though it is an old question  it is still a valid one  Expected behavior   Show selected file name after upload  Do not do anything if the user clicks Cancel  Show the file name even when the user selects the same file   Code with a demonstration   x000D   x000D   lt  DOCTYPE html gt   lt html gt    lt head gt     lt title gt File upload event lt  title gt   lt  head gt    lt body gt     lt form action    method  POST  enctype  multipart form-data  gt       lt input type  file  name  userFile  id  userFile  gt  lt br gt       lt input type  submit  name  upload btn  value  upload  gt     lt  form gt     lt script type  text javascript  gt      document getElementById  userFile   onchange   function e          alert this value         this value   null           lt  script gt   lt  body gt    lt  html gt  x000D   x000D   x000D   Explanation   The onchange event handler is used to handle any change in file selection event  The onchange event is triggered only when the value of an element is changed  So  when we select the same file using the input field the event will not be triggered  To overcome this  I set this value   null  at the end of the onchange event function  It sets the file path of the selected file to null  Thus  the onchange event is triggered even at the time of the same file selection

User · Answer

The Change event gets called even if you click on cancel

[javascript] HTML <input type='file'> File Selection Event

Examples related to javascript

Examples related to html

Examples related to dom-events