Friday, October 21, 2016

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

By Hường Hana 5:00 AM , Leave a Comment

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.

11 Answers

Answers 1

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/

Answers 2

Using jQuery:

<form id="target" action="destination.html">   <input type="file" id="file" value="Go" /> </form>   $('#file').change(function() {   $('#target').submit(); });

Answers 3

jquery .change() and .submit() will help you.

or in javascript with onchange event :

<form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filename" onchange="javascript:this.form.submit();"> </form>

Answers 4

The shortest solution is

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />

Answers 5

Just tell the file-input to automatically submit the form on any change:

<form action="http://example.com">     <input type="file" onchange="form.submit()" /> </form>

http://jsfiddle.net/4ng96dkp/7/

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

Answers 6

<form id="thisForm" enctype='multipart/form-data'>       <input type="file" name="file" id="file"> </form>  <script> $(document).on('ready', function(){   $('#file').on('change', function(){     $('#thisForm').submit();   }); }); </script>

Answers 7

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. <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".

Answers 8

HTML

<form id="xtarget" action="upload.php"> <input type="file" id="xfilename"> </form>

JAVASCRIPT PURE

<script type="text/javascript"> window.onload = function() {     document.getElementById("xfilename").onchange = function() {         document.getElementById("xtarget").submit();     } }; </script>

Answers 9

Try bellow code with jquery : 

<html> <head>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head>  <script> $(document).ready(function(){     $('#myForm').on('change', "input#MyFile", function (e) {         e.preventDefault();         $("#myForm").submit();     }); }); </script> <body>     <div id="content">         <form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">             <input type="file" id="MyFile" value="Upload" />         </form>     </div> </body> </html>

Answers 10

You can put this code to make your code work with just single line of code

<input type="file" onchange="javascript:this.form.submit()">

This will upload the file on server without clicking on submit button

Answers 11

<form action="http://example.com">     <input type="file" onchange="Submit()" /> </form>   <script>      // it will submit form 0 or you have to select particular form      document.getElementsByTagName("form")[0].submit();         </script>
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment