Ajax File Upload with Progress Bar using PHP and JQuery

File Upload with Progress Bar, The most key feature of the dynamic web application is the file upload function. PHP can be used to easily implement the file upload functionality. Usually, when you upload a file using PHP, the page is refreshed jQuery and Ajax can be used for uploading files or photos without refreshing the page, to make it easy for people to upload this file.

Progress Bar is very useful in showing the upload progress in a human-readable format. A progress bar is a graphical feature that visualizes an operation’s progress. A progress bar can usually be used to view progress representation for upload, download, or installation in a percentage format. In this tutorial, we will show you how to Upload File with Progress Bar using PHP and Ajax JQuery.

Table of Contents

Before getting started, take a look at the file structure.


file-upload-with-progress-bar-using-jquery-ajax-php/
├── index.html
├── upload.php
├── uploads/
└── LoaderIcon.gif

file-upload-with-progress-bar-using-jquery-ajax-php/

├── index.html

├── upload.php

├── uploads/

└── LoaderIcon.gif

File Upload with Progress Bar form (index.html)

In this form, we have file input and progress bar to show the progress of the upload file. In the starting, the progress bar width is set to 0.


// file upload html code
 <form id="uploadForm" action="upload.php" method="post">
<div>
<label>Upload File:</label>
<input name="userFile" id="userFile" type="file" class="demoInputBox">
</div>
<div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit"></div>
<div id="progress-div"><div id="progress-bar"></div></div>
</form>
<div id="loader-icon" style="display:none;"><img src="LoaderIcon.gif"></div>

// file upload html code

<div>

<label>Upload File:</label>

</div>

</form>

jQuery Ajax File Upload with Progress Bar:

The jQuery and Ajax are used to upload a progress bar file, so start with the jQuery library.

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(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 = parseInt(((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%');
                $('#loader-icon').show();
            },
            error:function(){
                $('#loader-icon').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');
            },
            success: function(resp){
                if(resp == 'ok'){
                    $('#uploadForm')[0].reset();
                    $('#loader-icon').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');
                    
                }else if(resp == 'err'){
                    $('#loader-icon').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');
                }
            }
        });
    });
	
    // File type validation
    $("#userFile").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).');
            $("#userFile").val('');
            return false;
        }
    });
});
</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 = parseInt(((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%');

$('#loader-icon').show();

error:function(){

$('#loader-icon').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');

success: function(resp){

if(resp == 'ok'){

$('#uploadForm')[0].reset();

$('#loader-icon').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');

}else if(resp == 'err'){

$('#loader-icon').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');

}

});

// File type validation

$("#userFile").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).');

$("#userFile").val('');

return false;

}

});

</script>

Upload File to “uploads” folder using PHP (upload.php)

The upload.php file is called to handle the process of uploading the file with PHP by the Ajax request.


<?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; 
?>

<?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;

View Live Demo

Also Read: jQuery to Preview and Rotate an Image Before Upload using PHP

Also Read: Multiple File Upload with PHP

Also Read: Resize Image While Uploading with PHP

Are you looking for Website Developer in Delhi?

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request OR Chat Using Bottom Right Facebook Chat Box

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co