Current Location: Home> Latest Articles> How to Implement Ajax File Upload with Progress Bar: PHP Example Tutorial

How to Implement Ajax File Upload with Progress Bar: PHP Example Tutorial

gitbox 2025-06-25

1. Introduction

File upload functionality is a common requirement in modern web applications, and implementing Ajax file uploads provides a smoother user experience. With Ajax, users can upload files without refreshing the entire page, and a progress bar allows them to track the upload status, reducing uncertainty during the process.

2. Implementation Principles

To implement an Ajax file upload with a progress bar, there are several key steps involved:

2.1 Create the Upload Form

First, we need to create an HTML form that supports file uploads. This is done by setting the form's enctype to "multipart/form-data".


  <form action="upload.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" id="file">
      <input type="submit" value="Upload">
  </form>

2.2 Send Files Using Ajax

Next, we use Ajax to asynchronously send the file to the server. Using JavaScript, we retrieve the file selected by the user, create a FormData object to hold the file data, and use the XMLHttpRequest object to send the data to the server.

Here is the JavaScript code example:


  var fileInput = document.getElementById("file");
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append("file", file);
  
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php", true);
  
  xhr.upload.addEventListener("progress", function(e) {
      var percent = Math.round((e.loaded / e.total) * 100);
      console.log("Upload Progress: " + percent + "%");
  });
  
  xhr.send(formData);

2.3 Server-Side Processing

The server needs to handle the uploaded file and save it to a specified location. In PHP, we can use the following code to save the uploaded file:


  <?php
  $targetDir = "uploads/";
  $targetFile = $targetDir . basename($_FILES["file"]["name"]);
  
  if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
      echo "File upload successful!";
  } else {
      echo "File upload failed!";
  }
  ?>

3. Add a Progress Bar

To provide users with a visual indicator of the upload progress, we can use the progress event of the XMLHttpRequest object in JavaScript. The progress event is triggered multiple times during the file upload, allowing us to update the progress bar.

Here is the code to update the progress bar:


  xhr.upload.addEventListener("progress", function(e) {
      var percent = Math.round((e.loaded / e.total) * 100);
      var progressBar = document.getElementById("progressBar");
      progressBar.style.width = percent + "%";
  });

This code dynamically updates the width of the progress bar during the upload, providing a real-time upload status.

4. Conclusion

By following the steps outlined above, we can implement an Ajax file upload feature with a progress bar. Users will be able to track the upload progress in real-time, enhancing their experience. This functionality involves both front-end and back-end integration, but once you understand the principles of each step, implementing this feature becomes straightforward.

Although Ajax file upload requires collaboration between the front-end and back-end, understanding each step of the process will enable you to easily develop such functionality for your web applications.

Related