How to Auto-Submit an Upload Form When a File Is Selected

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

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/

Auto-submit an upload form when a file is selected, and trigger an action

Solution 1: jsFiddle 1

$(document).ready(function(){    $("form").on('submit',function(){        alert("It works");    });});

<form action="http://example.com">    <input type="file" id="file" onchange="$('form').submit();" />    <input id="submit" type="submit" name="submit" value="Upload"/></form>

auto-submit an upload form when a file is selected with php?

You need to change This part if (isset($_file['submit'])) { withif (isset($_FILES['file'])) {

$_POST contains all the data from forms (except files).

$_FILES contains all files sent to server via forms (only from )

 <?php

   include_once 'includes/dbh.inc.php';
   include_once 'includes/vars.inc.php';

    if (isset($_FILES['file'])) {

        $file = $_FILES['file'];

        $fileNAME = $_FILES['file']['name'];
        $fileTYPE = $_FILES['file']['type'];
        $fileTMPNM = $_FILES['file']['tmp_name'];
        $fileERROR = $_FILES['file']['error'];
        $fileSIZE = $_FILES['file']['size'];

        $fileEXT = explode('.', $fileNAME);
        $fileACTUALEXT = strtolower(end($fileEXT));

        $fileALLOWED = array('jpg', 'jpeg', 'png', 'gif');

        if (in_array($fileACTUALEXT, $fileALLOWED)) {
            if ($fileERROR === 0) {
                if ($fileSIZE < 5000000) {
                    $fileNEWNAME = $userUID."-avatar.".$fileACTUALEXT;
                    $fileROOT = 'content/uploads/'.$fileNEWNAME;
                    move_uploaded_file($fileTMPNM, $fileROOT);
                    $sql = "UPDATE user_meta SET um_avatar_status=0 WHERE um_user_id='$userID';";
                    $result = mysqli_query($conn, $sql);
                    header('Location: '.$siteurl.'/user/'.$userUID.'?editavatar=success');
                } else {
                    echo "The file you are trying to upload is TOO big!";
                }

            } else {
                echo "Oops! there was an unknown ERROR, please try again later.";
            }

        } else {
            echo "you can't upload this type of files!";
        }

    }

    ?>

Automatically submitting a form when an upload file is chosen

If you want the form to submit after the user has made their selection, then simply add

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

POST immediately after select a file

To submit it immediately, just do this:

<input name="file_1" type="file" onchange="this.form.submit();">

If you are using JQuery:

$("input[name='file_1']").change(function() { this.form.submit(); });

About your other questions:

1) There are many methods out there... for example:

http://valums.com/ajax-upload/

http://www.webtoolkit.info/ajax-file-upload.html

(and many more. Just google for: "Ajax file upload" or "iframe file upload")

2) Don't worry about the width of the field. As you don't know how long can it be the path, it would never be long enough (i think). Also browsers may display it very different. For example Safari or Chrome show it very different from Firefox or IE. Just use the default length or the one that looks better with your design.

Can I auto-submit a file upload?

You need to listen for the change event.

$("#upload:hidden").on('change', function(){
    $('#inputForm').submit();
});

Style input file and auto submit

You can call the submit method of your form. It will submit your page to the server and you can get the file in the Files collection of the request.

You'll have to call the submit() method of the form on the "onchange" event of the "file" element.

<input type="file" onchange="formname.submit();" id="f" />

EDIT: Try this.

jQuery - Auto submit form

Is this what you want?

$(document).ready(function(){

    function validation() {
        //validation here
        alert('in function validation')
        $('#myForm').submit();
    }
    
    $('.submit').click(function(event) {
        event.preventDefault();
        $('#myfile').click();
    });
    
    $('#myfile').on('change',function(){
        validation();
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" class="form" id="myForm" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
  <input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
  <br/>
  <input type="submit" class="submit btn btn-primary" value="Import csv"/>
</form>

ajax upload file after choose file auto submit

Try this code. Alert calls just one time:

$(document).on('change', '.browseimage', function(){
    alert('change');
    // check FormData and ajax ..
});

http://jsfiddle.net/E9mPw/20/

---

Related Topics