How do I auto-submit an upload form when a file is selected

Question

I have a simple file upload form  How do I make it submit automatically when a file has been selected  I don t want the user to have to click the Submit button

User · Accepted Answer

You can simply call your form s submit method in the onchange event of your file input   document getElementById  file   onchange   function         document getElementById  form   submit         http   jsfiddle net cwvc4 73

User · Answer

JavaScript with onchange event   x000D   x000D   lt form action  upload php  method  post  enctype  multipart form-data  gt  x000D        lt input type  file  name  filename  onchange  javascript this form submit     gt  x000D   lt  form gt  x000D   x000D   x000D    jQuery   change   and  submit     x000D   x000D      fileInput   change function     x000D        myForm   submit    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js  gt  lt  script gt  x000D   lt form action  upload php  id  myForm  gt  x000D        lt input type  file  id  fileInput  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

For those who are using  NET WebForms a full page submit may not be desired  Instead  use the same onchange idea to have javascript click a hidden button  e g   lt asp Button     and the hidden button can take of the rest  Make sure you are doing a display  none  on the button and not Visible  false

User · Answer

lt form id  thisForm  enctype  multipart form-data  gt         lt input type  file  name  file  id  file  gt   lt  form gt    lt script gt    document  on  ready   function          file   on  change   function            thisForm   submit               lt  script gt

User · Answer

You can put this code to make your code work with just single line of code   lt input type  file  onchange  javascript this form submit    gt    This will upload the file on server without clicking on submit button

User · Answer

Try bellow code with jquery      lt html gt   lt head gt       lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt   lt  head gt    lt script gt    document  ready function            myForm   on  change    input MyFile   function  e            e preventDefault                myForm   submit                 lt  script gt   lt body gt       lt div id  content  gt           lt form id  myForm  action  action php  method  POST  enctype  multipart form-data  gt               lt input type  file  id  MyFile  value  Upload    gt           lt  form gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

Using jQuery    x000D   x000D      file   change function     x000D        target   submit    x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt form id  target  action  destination html  gt  x000D     lt input type  file  id  file  value  Go    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

If you already using jQuery simple    lt input type  file  onChange    this  closest  form   submit     gt

User · Answer

lt form action  http   example com  gt       lt input type  file  onchange  Submit      gt   lt  form gt     lt script gt          it will submit form 0 or you have to select particular form      document getElementsByTagName  form   0  submit             lt  script gt

User · Answer

Just tell the file-input to automatically submit the form on any change    x000D   x000D   lt form action  http   example com  gt  x000D       lt input type  file  onchange  form submit      gt  x000D   lt  form gt  x000D   x000D   x000D    This solution works like this    onchange makes the input element execute the following script  whenever the value is modified form references the form  that this input element is part of submit   causes the form to send all data to the URL  as specified in action   Advantages of this solution    Works without ids  It makes life easier  if you have several forms in one html page  Native javascript  no jQuery or similar required  The code is inside the html-tags  If you inspect the html  you will see it s behavior right away

User · Answer

This is my image upload solution  when user selected the file   HTML part    lt form enctype  multipart form-data  id  img form  method  post  gt       lt input id  img input  type  file  name  image  accept  image    gt   lt  form gt    JavaScript   document getElementById  img input   onchange   function      upload       function upload         var upload   document getElementById  img input        var image   upload files 0         ajax         url   foo bar uploadPic         type   POST         data  new FormData     img form   0          contentType false        cache  false        processData false        success function  msg

User · Answer

HTML   lt form id  xtarget  action  upload php  gt   lt input type  file  id  xfilename  gt   lt  form gt    JAVASCRIPT PURE   lt script type  text javascript  gt  window onload   function         document getElementById  xfilename   onchange   function             document getElementById  xtarget   submit              lt  script gt

User · Answer

The shortest solution is   lt input type  file  name  file  onchange  javascript document getElementById  form   submit       gt

[javascript] How do I auto-submit an upload form when a file is selected?

Examples related to javascript

Examples related to html