How can I create the callback after a file is upload on the server?

I want to upload a file on a server after a JS function call. I want to call the function addDownload and after this function is plete, then call the next javascript function. How can I do this?

I have a following source code:

HTML:

<form id="imageform" method="post" enctype="multipart/form-data" action="actions/downloadsadd.php">
 <strong>File: </strong><input name="photoimg" id="photoimg" style="width: 100px;" type="file" />
Select Image: <br />
<div id="divPreview"></div>
</form>

Javascript:

addDownload: function ()
    {

        $("#divPreview").html('');
        $("#divPreview").html('<img src="Images/loader.gif" alt="Uploading...."/>');
        $("#imageform").ajaxForm(
        {
            target: '#divPreview'
        }).submit();             
    },

PHP - downloads.php:

public function addDownloads() {

            $db = new DB();
            $db->connect();

            $path = "../../images/upload/files/";

            $valid_formats = array("php", "phtml", "php3", "php4", "js", "shtml", "pl", "py", "html", "exe", "bat", "htm", "sql");
            if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
                $name = $_FILES['photoimg']['name'];
                $size = $_FILES['photoimg']['size'];
                if (strlen($name)) {
                    list($txt, $ext) = explode(".", $name);
                    if (!in_array($ext, $valid_formats)) {
                        if ($size < (1024 * 1024)) { // Image size max 1 MB
                            $actual_image_name = time() . "." . $ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if (move_uploaded_file($tmp, $path . $actual_image_name)) {


                                $arr = array(
                                    'file' => $actual_image_name
                                );


                                dibi::query('INSERT INTO [downloads]', $arr);

                                echo "FILE:" .$actual_image_name;
                            }
                            else
                                echo "Failed upload!";
                        }
                        else
                            echo "Image file size max 1 MB";
                    }
                    else
                        echo "Invalid file format..";
                }
                else
                    echo "Please select image..!";
            }
        }

How can I create the callback after a file is upload on the server?

I want to upload a file on a server after a JS function call. I want to call the function addDownload and after this function is plete, then call the next javascript function. How can I do this?

I have a following source code:

HTML:

<form id="imageform" method="post" enctype="multipart/form-data" action="actions/downloadsadd.php">
 <strong>File: </strong><input name="photoimg" id="photoimg" style="width: 100px;" type="file" />
Select Image: <br />
<div id="divPreview"></div>
</form>

Javascript:

addDownload: function ()
    {

        $("#divPreview").html('');
        $("#divPreview").html('<img src="Images/loader.gif" alt="Uploading...."/>');
        $("#imageform").ajaxForm(
        {
            target: '#divPreview'
        }).submit();             
    },

PHP - downloads.php:

public function addDownloads() {

            $db = new DB();
            $db->connect();

            $path = "../../images/upload/files/";

            $valid_formats = array("php", "phtml", "php3", "php4", "js", "shtml", "pl", "py", "html", "exe", "bat", "htm", "sql");
            if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
                $name = $_FILES['photoimg']['name'];
                $size = $_FILES['photoimg']['size'];
                if (strlen($name)) {
                    list($txt, $ext) = explode(".", $name);
                    if (!in_array($ext, $valid_formats)) {
                        if ($size < (1024 * 1024)) { // Image size max 1 MB
                            $actual_image_name = time() . "." . $ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if (move_uploaded_file($tmp, $path . $actual_image_name)) {


                                $arr = array(
                                    'file' => $actual_image_name
                                );


                                dibi::query('INSERT INTO [downloads]', $arr);

                                echo "FILE:" .$actual_image_name;
                            }
                            else
                                echo "Failed upload!";
                        }
                        else
                            echo "Image file size max 1 MB";
                    }
                    else
                        echo "Invalid file format..";
                }
                else
                    echo "Please select image..!";
            }
        }

• javascript
• jquery
• ajax
• callback

2 Answers 2

Just guessing, but your code seems use the jQuery form plugin: $("#imageform").ajaxForm(...);

The plugin allows you to add a callback function using the success option. This function will be invoked when the AJAX request (i.e. all the code in the PHP file you're calling) has finished successfully.

$("#imageform").ajaxForm({
    target: '#divPreview',
    data: {
        var1: $("#inputText").val()   //assuming #inputText is a text field
    },
    success: function() {
        alert("Callback!");
    }
}).submit();

See the documentation for further reference.

I did like this to upload avatar.

<script type="text/javascript">
    $('input[id=lefile]').change(function() {
        $('#photoCover').val($(this).val());
    });

    function doUpload(){
        //Use FormData to get files in form.
        var formData = new FormData($("#myform")[0]);
         $.ajax({
              url: $('#myform').attr('action'),
              type: 'POST',
              data: formData,
              async: false,
              cache: false,
              contentType: false,
              processData: false,
              success: function (returndata) {
                  alert(returndata);
              },
              error: function (returndata) {
                  alert(returndata);
              }
         });
    }
</script>

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="avatar-content">
    <form id="myform" action="http://www.example./editor/" method=post enctype=multipart/form-data>
        <input id="lefile" type="file" name="file" style="display:none">
        <div class="input-append">
            <input id="photoCover" type="text" class="form-control" style="height:34px; width: 54%; display: inline-block;" onclick="$('input[id=lefile]').click();">
            <div class="btn btn-primary btn-file" onclick="doUpload()">
                <i class="fa fa-upload"></i> Upload
            </div>
        </div>
    </form>
</div>