File Uploading Using Ajax

Post Views: 6,509

Hello Friends, Today I am going to share File Uploading using Ajax code in PHP. There is three methods in the code by which file can be uploaded using Ajax which are :

Uploading With Form Tag
Uploading Without Form Tag
Uploading Without Form Tag Without Submit Button

Here is the code

PHP code to Handle File Upload Request

<?php
define("ERROR_RESPONSE_CODE", "1");
define("SUCCESS_RESPONSE_CODE", "0");

$action = $_REQUEST['action'];

if ($action == 'uploadfile') {
    $response['code'] = ERROR_RESPONSE_CODE;
    $upload_path = 'uploads/';
    $upload_url = $upload_path;

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        //checking the required parameters from the request         
        if (isset($_FILES['file']['name'])) {
            $fileinfo = pathinfo($_FILES['file']['name']);
            $extension = $fileinfo['extension'];
            $filename = time();
            $file_url = $upload_url . $filename . '.' . $extension;

            //file path to upload in the server 
            $file_path = $upload_path . $filename . '.' . $extension;
            try {
                //saving the file 
                if(move_uploaded_file($_FILES['file']['tmp_name'], $file_path)) {
                    $response['code'] = SUCCESS_RESPONSE_CODE;
                    $response['file_url'] = $file_url;
                    $response['msg'] = 'Uploaded successfully!';
                    $response['htmlmsg'] = '<div class="alert alert-success">Uploaded successfully!</div>';
                }
            } catch (Exception $e) {
                $response['code'] = ERROR_RESPONSE_CODE;
                $response['msg'] = 'Error!';
                $response['htmlmsg'] = '<div class="alert alert-danger">Error!</div>';
            }
        } else {
            $response['code'] = ERROR_RESPONSE_CODE;
            $response['msg'] = 'Please choose file!';
            $response['htmlmsg'] = '<div class="alert alert-danger">Please choose file!</div>';
        }
    }
    header("Content-Type:application/json");
    echo json_encode($response);
    exit();
}

<?php

define("ERROR_RESPONSE_CODE", "1");

define("SUCCESS_RESPONSE_CODE", "0");

$action = $_REQUEST['action'];

if ($action == 'uploadfile') {

$response['code'] = ERROR_RESPONSE_CODE;

$upload_path = 'uploads/';

$upload_url = $upload_path;

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//checking the required parameters from the request

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

$fileinfo = pathinfo($_FILES['file']['name']);

$extension = $fileinfo['extension'];

$filename = time();

$file_url = $upload_url . $filename . '.' . $extension;

//file path to upload in the server

$file_path = $upload_path . $filename . '.' . $extension;

try {

//saving the file

if(move_uploaded_file($_FILES['file']['tmp_name'], $file_path)) {

$response['code'] = SUCCESS_RESPONSE_CODE;

$response['file_url'] = $file_url;

$response['msg'] = 'Uploaded successfully!';

$response['htmlmsg'] = '<div class="alert alert-success">Uploaded successfully!</div>';

}

} catch (Exception $e) {

$response['code'] = ERROR_RESPONSE_CODE;

$response['msg'] = 'Error!';

$response['htmlmsg'] = '<div class="alert alert-danger">Error!</div>';

}

} else {

$response['code'] = ERROR_RESPONSE_CODE;

$response['msg'] = 'Please choose file!';

$response['htmlmsg'] = '<div class="alert alert-danger">Please choose file!</div>';

}

header("Content-Type:application/json");

echo json_encode($response);

exit();

}

Note: Here I am using just simple upload code, you can add validation codes for file size, file type, etc.

HTML & Javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border="1" style="width: 100%;">
            <tr>
                <td>
                    <h4>Uploading With Form Tag</h4>
                    <form id="form" method="post" enctype="multipart/form-data">
                        <input class="btn" type="file" name="file" required>    
                        <input type="submit" name="upload" value="Upload"/>
                    </form>
                </td>
                <td>
                    <h4>Uploading Without Form Tag</h4>
                    <input id="fileinput1" type="file">
                    <input id="uploadfilebtn" type="submit" name="upload" value="Upload"/>
                </td>
                <td>
                    <h4>Uploading Without Form Tag Without Submit Button</h4>
                    <input id="fileinput" type="file">                    
                </td>  
            </tr>            
            <tr>
                <td colspan="3">
                    <span id="uploadingmsg"></span>
                </td>                
            </tr>
        </table>                

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            $(function () {
                $("#form").submit(function (e) {
                    e.preventDefault();
                    var action = "requests.php?action=uploadfile";
                    $("#uploadingmsg").html("Uploading...");
                    var data = new FormData(e.target);
                    $.ajax({
                        type: 'POST',
                        url: action,
                        data: data, 
                        /*THIS MUST BE DONE FOR FILE UPLOADING*/
                        contentType: false,
                        processData: false,
                    }).done(function (data) {
                        $("#uploadingmsg").html("Code: " + data.code + "<br/>Message: " + data.msg + "<br/>");
                        if (data.code === '0') {
                            $("#uploadingmsg").append("File Url: " + data.file_url + "<br/>");
                        }
                    }).fail(function (data) {
                        //any message
                    });
                });                                
                
                $("#uploadfilebtn").click(function (e) {
                    e.preventDefault();
                    var action = "requests.php?action=uploadfile";
                    if ($("#fileinput1").val() === "") {
                        return;
                    }
                    $("#uploadingmsg").html("Uploading...");
                    var data = new FormData();
                    data.append("file", $('input[type=file]')[1].files[0]);
                    $.ajax({
                        type: 'POST',
                        url: action,
                        data: data,
                        /*THIS MUST BE DONE FOR FILE UPLOADING*/
                        contentType: false,
                        processData: false,
                    }).done(function (data) {
                        $("#uploadingmsg").html("Code: " + data.code + "<br/>Message: " + data.msg + "<br/>");
                        if (data.code === '0') {
                            $("#uploadingmsg").append("File Url: " + data.file_url + "<br/>");
                        }
                    }).fail(function (data) {
                        //any message
                    });
                });
                
                $("#fileinput").change(function (e) {
                    e.preventDefault();
                    var action = "requests.php?action=uploadfile";
                    if ($("#fileinput2").val() === "") {
                        return;
                    }
                    $("#uploadingmsg").html("Uploading...");
                    var data = new FormData();
                    data.append("file", $('input[type=file]')[2].files[0]);
                    $.ajax({
                        type: 'POST',
                        url: action,
                        data: data,
                        /*THIS MUST BE DONE FOR FILE UPLOADING*/
                        contentType: false,
                        processData: false,
                    }).done(function (data) {
                        $("#uploadingmsg").html("Code: " + data.code + "<br/>Message: " + data.msg + "<br/>");                        
                        if (data.code === '0') {
                            $("#uploadingmsg").append("File Url: " + data.file_url + "<br/>");
                        }
                    }).fail(function (data) {
                        //any message
                    });
                });
            });
        </script>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>

<h4>Uploading With Form Tag</h4>

</form>

</td>

<td>

<h4>Uploading Without Form Tag</h4>

</td>

<td>

<h4>Uploading Without Form Tag Without Submit Button</h4>

</td>

</tr>

<tr>

</td>

</tr>

</table>

$(function () {

$("#form").submit(function (e) {

e.preventDefault();

var action = "requests.php?action=uploadfile";

$("#uploadingmsg").html("Uploading...");

var data = new FormData(e.target);

$.ajax({

type: 'POST',

url: action,

data: data,

/*THIS MUST BE DONE FOR FILE UPLOADING*/

contentType: false,

processData: false,

}).done(function (data) {

$("#uploadingmsg").html("Code: " + data.code + "<br/>Message: " + data.msg + "<br/>");

if (data.code === '0') {

$("#uploadingmsg").append("File Url: " + data.file_url + "<br/>");

}

}).fail(function (data) {

//any message

});

$("#uploadfilebtn").click(function (e) {

e.preventDefault();

var action = "requests.php?action=uploadfile";

if ($("#fileinput1").val() === "") {

return;

}

$("#uploadingmsg").html("Uploading...");

var data = new FormData();

data.append("file", $('input[type=file]')[1].files[0]);

$.ajax({

type: 'POST',

url: action,

data: data,

/*THIS MUST BE DONE FOR FILE UPLOADING*/

contentType: false,

processData: false,

}).done(function (data) {

$("#uploadingmsg").html("Code: " + data.code + "<br/>Message: " + data.msg + "<br/>");

if (data.code === '0') {

$("#uploadingmsg").append("File Url: " + data.file_url + "<br/>");

}

}).fail(function (data) {

//any message

});

$("#fileinput").change(function (e) {

e.preventDefault();

var action = "requests.php?action=uploadfile";

if ($("#fileinput2").val() === "") {

return;

}

$("#uploadingmsg").html("Uploading...");

var data = new FormData();

data.append("file", $('input[type=file]')[2].files[0]);

$.ajax({

type: 'POST',

url: action,

data: data,

/*THIS MUST BE DONE FOR FILE UPLOADING*/

contentType: false,

processData: false,

}).done(function (data) {

$("#uploadingmsg").html("Code: " + data.code + "<br/>Message: " + data.msg + "<br/>");

if (data.code === '0') {

$("#uploadingmsg").append("File Url: " + data.file_url + "<br/>");

}

}).fail(function (data) {

//any message

});

</script>

</body>

</html>

File Uploading Using Ajax

PHP code to Handle File Upload Request

HTML & Javascript

Output

NetBeans Project Download

File Uploading Using Ajax

Comments

Leave a Reply Cancel reply