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


Translate

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.



All Answers
  • Translate

    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/


  • Translate

    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>

  • Translate

    Using jQuery:

    $('#file').change(function() {
      $('#target').submit();
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form id="target" action="destination.html">
      <input type="file" id="file" value="Go" />
    </form>

  • Translate

    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>

  • Translate

    The shortest solution is

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

  • Translate
    <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>
    

  • Translate

    If you already using jQuery simple:

    <input type="file" onChange="$(this).closest('form').submit()"/>
    

  • Translate

    This is my image upload solution, when user selected the file.

    HTML part:

    <form enctype="multipart/form-data" id="img_form" method="post">
        <input id="img_input" type="file" name="image" accept="image/*">
    </form>
    

    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) {}
          });
    };
    

  • Translate

    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>
    

  • Translate

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


  • Translate

    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>
    

  • Translate

    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


  • Translate
    <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>