How to Files Upload with Progress Bar Help of jQuery Ajax & PHP

The file upload feature is the most used functionality for the dynamic web application. The file upload functionality can be facilely implemented utilizing PHP. Generally, the page is refreshed when you upload file utilizing PHP. To make this file upload utilizer-cordial, jQuery and Ajax can be acclimated to upload files/images without page refresh.
While the file is uploading to the server, the web page stays on the loading state. It’s very arduous for the utilizer to track the upload progress. Progress Bar is very utilizable to surmount this issue by exhibiting the upload progress in a human-readable format. A progress bar is a graphical element that visualizes the progression of an operation. Generally, a progress bar is utilized to show progress representation in percentage format for upload, download, or installation. In this tutorial, we will show you how to upload file in PHP and make a progress bar utilizing jQuery and Ajax.

In the example ajax progress bar with percentage script, we will implement the following functionality.

• HTML form to select file.
• Display progress bar when the upload is on the process using jquery.
• Add upload completion percentage to the progress bar real-time using Ajax.
• Upload file to server using PHP.

Before getting started to integrate file upload with progress bar, take a look at the file structure.

php_file_upload_with_progress_bar_jquery/
├── index.html
├── upload.php
├── uploads/
├── js/
│   └── jquery.min.js
├── css/
│   └── style.css
└── images/

File Upload Form with Progress Bar

The index.html file handles the file selection and live upload progress display operations.

File Upload Form:
1. Create an HTML form with a file input field and a submit button.

• The <form> tag must contain the enctype="multipart/form-data" attributes.
• The <input> tag must contain type="file".

<!-- File upload form -->
<form id="uploadForm" enctype="multipart/form-data">
    <label>Choose File:</label>
    <input type="file" name="file" id="fileInput">
    <input type="submit" name="submit" value="UPLOAD"/>
</form>

2. Define an HTML element to display the progress bar.

<!-- Progress bar -->
<div class="progress">
    <div class="progress-bar"></div>
</div>

3. Define an HTML element to display the file upload status.

<!-- Display upload status -->
<div id="uploadStatus"></div>

Ajax File Upload with Progress Bar:

The jQuery and Ajax is used to upload file with a progress bar, so include the jQuery library first.

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

The following jQuery code sends the selected file data to the server-side script without reloading the page via Ajax.

• On form submission, the selected file data is sent to the server-side script (upload.php) using jQuery and Ajax.
  • The xhr option of the $.ajax() method is used to track the upload progress.
  • The window.XMLHttpRequest() method creates a new XMLHttpRequest object.
  • The progress event of XMLHttpRequest upload property indicates the amount of progress made so far.
  • The upload progress percentage is attached to the progress bar.
• The FormData object is used to retrieve the submitted file data.
  • Based on the response, the upload status is displayed on the webpage.
• On change event, the file type is validated based on the allowed types.
  • The File API is used to get the type of the selected file.
  • The MIME type of the selected file is validated and restricts the user to upload only the image (.jpeg/.jpg/.png/.gif) or PDF (.pdf) or MS Word (.doc/.docx) file.
  • The includes() method determines whether allowedTypes array contains the selected file type

<script>
$(document).ready(function(){
    // File upload via Ajax
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = ((evt.loaded / evt.total) * 100);
                        $(".progress-bar").width(percentComplete + '%');
                        $(".progress-bar").html(percentComplete+'%');
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: 'upload.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $(".progress-bar").width('0%');
                $('#uploadStatus').html('<img src="images/loading.gif"/>');
            },
            error:function(){
                $('#uploadStatus').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');
            },
            success: function(resp){
                if(resp == 'ok'){
                    $('#uploadForm')[0].reset();
                    $('#uploadStatus').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');
                }else if(resp == 'err'){
                    $('#uploadStatus').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');
                }
            }
        });
    });
    // File type validation
    $("#fileInput").change(function(){
        var allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.ms-office', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
        var file = this.files[0];
        var fileType = file.type;
        if(!allowedTypes.includes(fileType)){
            alert('Please select a valid file (PDF/DOC/DOCX/JPEG/JPG/PNG/GIF).');
            $("#fileInput").val('');
            return false;
        }
    });
});
</script>

Upload File to Server using PHP

The upload.php file is called by the Ajax request to handles the file upload process with PHP.

• Retrieve the file information from posted data using the PHP $_FILES method.
• Upload the file to the server using move_uploaded_file() function in PHP.
• Render file upload status that returns to the Ajax success function.

<?php 
$upload = 'err'; 
if(!empty($_FILES['file'])){ 
    // File upload configuration 
    $targetDir = "uploads/"; 
    $allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg', 'gif'); 
    $fileName = basename($_FILES['file']['name']); 
    $targetFilePath = $targetDir.$fileName; 
    // Check whether file type is valid 
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION); 
    if(in_array($fileType, $allowTypes)){ 
        // Upload file to the server 
        if(move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)){ 
            $upload = 'ok'; 
        } 
    } 
} 
echo $upload; 
?>

i hope you like this article.