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.

Read Also:  Fadein Fadeout example using Jquery Example

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery Validate CKEditor value is blank or not
  2. Read Also:  Validate CKEditor Fields Using JQuery validation
  3. Read Also:  jQuery Show Popup Message Few Seconds then hide
  4. Read Also:  jquery Drag and Drop draggable droppable Example
  5. Read Also:  jQuery Ajax File upload with Percentage Progress bar using PHP MySQLi
  6. Read Also:  FullCalendar - Vuejs Event Calendar Component
  7. Read Also:  Laravel If Else and Switch Case
  8. Read Also:  jquery validate Form Validation
  9. Read Also:  Eloquent Left Join Queries in Laravel Examples
  10. Read Also:  PHP Ajax dynamic Progress Bar for PHP AJAX File Upload
CLOSEX