loading

How to File Upload with Progress Bar using jQuery Ajax and PHP

How to File Upload with Progress Bar using jQuery Ajax and PHP

How to File Upload with Progress Bar using jQuery Ajax and PHP

0 Sales

Free

The most commonly utilised capability for the dynamic web app is the file upload option. PHP may be used to simply develop file upload capabilities. When you upload a file with PHP, the website is usually updated. jQuery and Ajax may be used to transfer files/images without requiring a page refresh to render this file upload more user-friendly.

The web page remains in the loading stage while the file is being uploaded to the server. The user has a tough time tracking the upload process. The Progress Bar can help you address this problem by displaying the transfer status in a human-readable way. A toolbar is a visual component that depicts how an operation is progressing. In general, a progress bar is used to display progress in form of percentage for uploading, downloading, or installation. In this article, we'll teach you how to use jQuery and Ajax to upload a file and create a progress bar.

File Upload Form with Progress Bar

The index.html file is in charge of file selection and displaying the live upload process.


1. Design an HTML form that includes a file html form and a submit button.

 - The enctype="multipart/form-data" attributes must be included in the form> tag.

 - The type="file" attribute must be included in the input> tag.

<!-- 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. Create an HTML element that will display the progress bar.

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

3. Create an HTML element that will show the file upload status.

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

Ajax File Upload with Progress Bar:

Because jQuery and Ajax are needed to upload files with a progress bar, the jQuery library must be included first.

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

The jQuery code below delivers the data from the specified file to the server-side script without refreshing the page using Ajax.

 - Using jQuery and Ajax, the selected file data is delivered to the server-side script (upload.php) upon form submission.

      - The $.ajax() method's xhr argument is used to track the upload progress.

      - The window.XMLHttpRequest() function is used to generate a new XMLHttpRequest object.

      - The progress event of the XMLHttpRequest upload property tells how far the request has progressed.

      - The percentage of upload progress is tied to the progress bar.

 - The FormData object is used to obtain the data from the submitted file.

      - The upload status is shown on the webpage based on the answer.

 - The type of file is verified based on the authorised kinds at the change event.

      - The File API is used to determine the type of the currently chosen file.

      - The MIME type of the selected file is validated, and the user is restricted to uploading only image (.jpeg/.jpg/.png/.gif) or PDF (.pdf) or MS Word (.doc/.docx) files.

      - The includes() function checks to see if the given file type is in the allowedTypes array.

<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 Ajax request calls the upload.php file, which handles the file upload procedure with PHP.

 - Using the PHP $_FILES method, you may retrieve file information from uploaded data.

 - Using PHP's move uploaded file() method, upload the file to the server.

 - Return to the Ajax success function after rendering the file upload status.

<?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($targetFilePathPATHINFO_EXTENSION); 
    if(in_array($fileType$allowTypes)){ 
        // Upload file to the server 
        if(move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)){ 
            $upload 'ok'; 
        } 
    } 
} 
echo $upload; 
?>

 

Conclusion

The taskbar icon is a simple approach to display the uploading progress status in real time. Users can use jQuery to attach a toolbar to an uploading files and display a % countdown timer as the file uploads to the server. In PHP, you may add a progress bar to any sort of uploading files (PDF, Docx, Video, image, doc, audio, etc.). Our example code demonstrates how to create a progress bar with a % for uploading, downloading, and installation processes.

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : Jan 24, 2022

Updated Date : Jan 24, 2022

Ratings

Comments : 0

Downloads : 0