Jquery Ajax File Upload Example in Php

By on in ,
In current world while making website or an application, the file uploading is one of the important requirement through front end or back end(Admin panel). Jquery and Ajax moved web development to the next level. Today no one want to upload files through traditional fashion or wait till page get reloaded completely after upload.
So here we will show you how to create your Jquery Ajax file upload application in php so that you don’t need to wait for page reload.
Jquery Ajax File Upload in Php
Jquery Ajax File Upload in Php
Here is the Download link for “Jquery Ajax File Upload in Php Tutorial”.

Creating Jquery Ajax file upload in php require 2 step procedure.

Step 1:- You need to create “index.html” file which contain code of front end to upload your files.

<html>

    <head>
        <title>jQuery Ajax File Upload Example in PHP – Demo</title>
        <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js”></script>
        <script src=”http://malsup.github.com/jquery.form.js”></script>
        <link rel=”stylesheet” type=”text/css” href=”style.css” />
        <script>
            $(document).ready(function()
            {
                var options = {
                    target:   ‘#message’,
                    beforeSubmit: function()
                    {
                        $(“#progress”).show();
                        $(“#bar”).width(’0%’);
                        $(“#message”).html(“”);
                        $(“#percent”).html(“0%”);
                        if (window.File && window.FileReader && window.FileList && window.Blob)
                        {
                            if( !$(‘#ajaxUpload’).val()) //check empty input filed
                            {
                                $(“#message”).html(“<font color=’red’>Please select the file to upload!!!</font>”);
                                return false;
                            }
                            var fileSize = $(‘#ajaxUpload’)[0].files[0].size; //get file size
                            var fileType = $(‘#ajaxUpload’)[0].files[0].type; // get file type
                            //allow file types
                            switch(fileType)
                            {
                                case ‘image/png’:
                                case ‘image/gif’:
                                case ‘image/jpeg’:
                                case ‘image/pjpeg’:
                                case ‘text/plain’:
                                case ‘text/html’:
                                case ‘application/x-zip-compressed’:
                                case ‘application/pdf’:
                                case ‘application/msword’:
                                case ‘application/vnd.ms-excel’:
                                case ‘video/mp4′:
                                    break;
                                default:
                                    $(“#message”).html(“<font color=’red’><b>”+fileType+”</b> Unsupported file type!</font>”);
                                    return false
                            }
                            //Allowed file size is less than 5 MB (1048576)
                            if(fileSize>5242880)
                            {
                                $(“#message”).html(“<font color=’red’><b>Too big file!</b> <br />File should be less than 5 MB.</font>”);
                                return false;
                            }
                            $(“#message”).html(“”);
                        }
                        else
                        {
                            //Output error to older unsupported browsers that doesn’t support HTML5 File API
                            $(“#message”).html(“Please upgrade your browser, because your current browser lacks some new features we need!”);
                            return false;
                        }
                    },
                    uploadProgress: function(event, position, total, percentComplete)
                    {
                        $(“#bar”).width(percentComplete+’%’);
                        $(“#percent”).html(percentComplete+’%’);
                    },
                    success: function()
                    {
                        $(“#bar”).width(’100%’);
                        $(“#percent”).html(’100%’);
                    },
                    complete: function(response)
                    {
                        $(“#message”).html(“<font color=’green’>”+response.responseText+”</font>”);
                    },
                    error: function()
                    {
                        $(“#message”).html(“<font color=’red’> ERROR: unable to upload files</font>”);
                    },
                    resetForm: true
                };
                $(‘#jqueryAjaxForm’).submit(function() {
                    $(this).ajaxSubmit(options);
                    // always return false to prevent standard browser submit and page navigation
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div class=”main-wrapper”>
            <form id=”jqueryAjaxForm” name=”jqueryAjaxForm” action=”upload.php” method=”post” enctype=”multipart/form-data”>
                <h1 class=”page_header”>Jquery Ajax File Upload Example</h1>
                <input type=”file” size=”60″ name=”ajaxUpload” id=”ajaxUpload”>
                <input type=”submit” value=”Upload” id=”submit-btn”>
            </form>
            <div id=”progress”>
                <div id=”bar”></div>
                <div id=”percent”>0%</div >
            </div>
            <div id=”message” class=”msg”></div>
        </div>
        <br/>
    </body>
</html>
Step 2:- In this step create a “upload.php” file which contain codes to move your file from temporary directory to specified directory.
<?php

    //In below line we are specifying the path/name of folder where uploaded image get stored.

    $output_dir = “uploads/”;

    if (isset($_FILES["ajaxUpload"])) {

        if ($_FILES["ajaxUpload"]["error"] > 0) {

            echo “Error Occured: ” . $_FILES["file"]["error"] . “<br>”;

        } else {

    //Below we are moving uploaded file from temporary directory to specified directory.

            move_uploaded_file($_FILES["ajaxUpload"]["tmp_name"], $output_dir . $_FILES["ajaxUpload"]["name"]);

            echo $_FILES["ajaxUpload"]["name"].” Successfully Uploaded.”;

        }

    }

?>
Thats it. No need to do any extra stuff now and your Jquery Ajax file upload application is ready to use.

Hope this php tutorial is useful for you. Keep following Php Point for more Codes.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)