jQuery Ajax File upload with Percentage Progress bar

phpjquery

I have already written a similar post long back using jQuery form Plugin if you wish you can see the link below:

PHP jQuery AJAX Image Upload Script download and use it!

Before going through the script you can see the demo here:

demo

 

 

The difference between the above and this post is, here we are using pure jQuery no plugin used, also with a progress bar.

And the backend script is obviously PHP and there is one more different, this script can be used to upload images, documents, etc.,

Let’s see the Front end script first (HTML and jQuery also used Bootstrap for progress bar):

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Ajax file upload with percentage progress bar</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- include jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <!-- include bootstrap files -->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script>
            $(function () {
                $('#btn').click(function () {
                    $('.myprogress').css('width', '0');
                    $('.msg').text('');
                    var filename = $('#filename').val();
                    var myfile = $('#myfile').val();
                    if (filename == '' || myfile == '') {
                        alert('Please enter file name and select file');
                        return;
                    }
                    var formData = new FormData();
                    formData.append('myfile', $('#myfile')[0].files[0]);
                    formData.append('filename', filename);
                    $('#btn').attr('disabled', 'disabled');
                     $('.msg').text('Uploading in progress...');
                    $.ajax({
                        url: 'uploadscript.php',
                        data: formData,
                        processData: false,
                        contentType: false,
                        type: 'POST',
                        // this part is progress bar
                        xhr: function () {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function (evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = evt.loaded / evt.total;
                                    percentComplete = parseInt(percentComplete * 100);
                                    $('.myprogress').text(percentComplete + '%');
                                    $('.myprogress').css('width', percentComplete + '%');
                                }
                            }, false);
                            return xhr;
                        },
                        success: function (data) {
                            $('.msg').text(data);
                            $('#btn').removeAttr('disabled');
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <h3>jQuery Ajax file upload with percentage progress bar</h3>
                <form id="myform" method="post">

                    <div class="form-group">
                        <label>Enter the file name: </label>
                        <input class="form-control" type="text" id="filename" /> 
                    </div>
                    <div class="form-group">
                        <label>Select file: </label>
                        <input class="form-control" type="file" id="myfile" />
                    </div>
                    <div class="form-group">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
                        </div>

                        <div class="msg"></div>
                    </div>

                    <input type="button" id="btn" class="btn-success" value="Upload" />
                </form>
            </div>
        </div>
    </body>
</html>

As you can see I have used FormData() to send the form data to the backend PHP script.

Let’s see the PHP script as well:

<?php

error_reporting(0);
if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {

    $path = "uploads/"; //set your folder path
    //set the valid file extensions 
    $valid_formats = array("jpg", "png", "gif", "bmp", "jpeg", "GIF", "JPG", "PNG", "doc", "txt", "docx", "pdf", "xls", "xlsx"); //add the formats you want to upload

    $name = $_FILES['myfile']['name']; //get the name of the file
    
    $size = $_FILES['myfile']['size']; //get the size of the file

    if (strlen($name)) { //check if the file is selected or cancelled after pressing the browse button.
        list($txt, $ext) = explode(".", $name); //extract the name and extension of the file
        if (in_array($ext, $valid_formats)) { //if the file is valid go on.
            if ($size < 2098888) { // check if the file size is more than 2 mb
                $file_name = $_POST['filename']; //get the file name
                $tmp = $_FILES['myfile']['tmp_name'];
                if (move_uploaded_file($tmp, $path . $file_name.'.'.$ext)) { //check if it the file move successfully.
                    echo "File uploaded successfully!!";
                } else {
                    echo "failed";
                }
            } else {
                echo "File size max 2 MB";
            }
        } else {
            echo "Invalid file format..";
        }
    } else {
        echo "Please select a file..!";
    }
    exit;
}

You can read the comments in the above file to understand the script.

 

Download this script from the links below:

download

10 thoughts on “jQuery Ajax File upload with Percentage Progress bar

  1. Hi, thanks for this post i’ve tested in my php application and it works really well. I’m trying to add sweet alert popup for error messages like “File size max 2 MB” etc, could you help me please?

  2. Perfect its working fine in core PHP. Can you also please provide me the files in CodeIgniter? I try to integrate with CodeIgniter and it’s not working at there. Please help

  3. Thanks for this code. I was struggling with the ajax call to get a progressbar. This code works perfectly with CodeIgniter!

    1. There are 2 different technologies are used in this script PHP and JavaScript so ‘echo’ is used on PHP script, please go through the script so you can understand.

Leave a Reply

Theme: Overlay by Kaira
Agurchand