File Upload Progress Bar with JS and PHP

Let’s go through the steps to implement a file upload progress bar using JavaScript and PHP:

1. Why should I implement a progress bar?

Implementing a progress bar provides a better user experience by visually indicating the progress of file uploads. It helps users understand how much time is remaining and assures them that the upload process is ongoing.

2. Requirements:

– Basic understanding of HTML, CSS, JavaScript, and PHP.
– A web server environment supporting PHP.
– Text editor or IDE for code editing.

3. File Structure & Setup:

Ensure you have the following files and directories set up:

   ├── uploads/         (directory to store uploaded files)
   ├── index.html       (HTML form for file upload)
   ├── upload.php       (PHP script for handling file upload)
   ├── style.css        (CSS stylesheet for styling)
   └── script.js        (JavaScript for handling AJAX requests and progress bar)

4. Stylesheet (CSS3):

Create a stylesheet (`style.css`) to style the progress bar and form elements.

   .progress {
       width: 100%;
       background-color: #f0f0f0;
   .bar {
       width: 0%;
       height: 30px;
       background-color: #4caf50;

5. **Creating the Form Interface with HTML**:

Develop an HTML form (`index.html`) to allow users to upload files.


File Upload Progress Bar

6. Event Handling & AJAX Requests with JS:

Write JavaScript code (`script.js`) to handle form submission via AJAX and update the progress bar.

 document.getElementById('uploadForm').addEventListener('submit', function(event) {
    var formData = new FormData(this);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(event) {
        var percent = (event.loaded / * 100;
        document.querySelector('.bar').style.width = percent + '%';

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            document.getElementById('message').innerHTML = xhr.responseText;
    };'POST', 'upload.php', true);

7. Form Handling with PHP:

Create a PHP script (`upload.php`) to handle file upload and return the progress.

8.  Processing the Uploaded Files:

You can extend `upload.php` to include additional processing logic, such as file validation or renaming.

9. Implementing Validation:

Add validation checks in `upload.php` to ensure that only allowed file types and sizes are uploaded.

That’s it! You’ve now implemented a file upload progress bar using JavaScript and PHP. Users can upload files, and they will see a visual representation of the upload progress.

Add a Comment

Your email address will not be published. Required fields are marked *


My name is Nohman Habib and I am a web developer with over 10 years of experience, programming in Joomla, Wordpress, WHMCS, vTiger and Hybrid Apps. My plan to start is to share my experience and expertise with others. Here my basic area of focus is to post tutorials primarily on Joomla development, HTML5, CSS3 and PHP.

Nohman Habib


Request a Quote

PHP Code Snippets Powered By :