jQuery Ajax File Upload with Progress Bar

Today, We want to share with you jquery file upload progress bar percentage.In this post we will show you file upload progress bar with percentage using javascript, hear for jquery multiple file upload with progress bar we will give you demo and example for implement.In this post, we will learn about file upload progress bar with an example.

File Upload with Progress Bar using jQuery Ajax and PHP

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

demo_jquery_pakainfo_tutorials/
├── index.html
├── do_online_admin_upload.php
├── medias/
├── js/
│   └── jquery.min.js
├── css/
│   └── style.css
└── images/

File Upload Form with Progress Bar

The main root file like a index.html file handles the file selection as well as live upload progress display operations.
File Upload Form:

<form id="imgDataAllStore" enctype="multipart/form-data">
    <label>Select File:</label>
    <input type="file" name="file" id="userUploadedFile">
    <input type="submit" name="submit" value="UPLOAD"/>
</form>

Progress bar

<!-- Progress bar -->
<div class="progress">
    <div class="live-status-display-full-prog"></div>
</div>

Example 3: display the file upload status

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

jQuery Code

<script>
$(document).ready(function(){
    // File upload via jquery Ajax
    $("#imgDataAllStore").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);
                        $(".live-status-display-full-prog").width(percentComplete + '%');
                        $(".live-status-display-full-prog").html(percentComplete+'%');
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: 'do_online_admin_upload.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $(".live-status-display-full-prog").width('0%');
                $('#fileOnlineStoreProgressStatus').html('<img src="images/loading.gif"/>');
            },
            error:function(){
                $('#fileOnlineStoreProgressStatus').html('<p style="color:#EA4335;">Sorry, DEar File upload failed, please try again.</p>');
            },
            success: function(resp){
                if(resp == 'ok'){
                    $('#imgDataAllStore')[0].reset();
                    $('#fileOnlineStoreProgressStatus').html('<p style="color:#28A74B;">Good Luck File has uploaded successfully!</p>');
                }else if(resp == 'err'){
                    $('#fileOnlineStoreProgressStatus').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');
                }
            }
        });
    });
	
    // Jquery Ajax File type validation
    $("#userUploadedFile").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 getFlTypename = file.type;
        if(!allowedTypes.includes(getFlTypename)){
            alert('Please select a valid file Like as a (PDF/DOC/DOCX/JPEG/JPG/PNG/GIF).');
            $("#userUploadedFile").val('');
            return false;
        }
    });
});
</script>

Upload File to Server using PHP

do_online_admin_upload.php

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

Ajax File Upload with Progress Bar:

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

I hope you get an idea about file upload progress bar with javascript and php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.