How to Upload the Progress Bar in JavaScript

JavaScript provides you with the code statements needed to upload a progress bar, which means you create a progress bar that tells the user the status of an uploaded file. If the file is large, it takes several minutes to upload the file. Provide a progress bar, so the user knows the site is working properly and hasn't stopped uploading the file.

Instructions

1. Open your preferred JavaScript editor and your website project. You can also edit JavaScript using an HTML editor.

2. Create the CSS style. The CSS style sets up the colored section of the bar, so each increment adds more color to the bar's progress state. Copy and paste the following CSS code to set up the bar's colors and layout:

   #bar p
   {
   display: block;
   width: 300px;
   padding: 2px 5px;
   margin: 2px 0;
   border: 1px inset #446;
   border-radius: 5px;
   }

3. Add the JavaScript functionality for the upload process. The following code uploads a file for the user and sets up the progress bar view:

   var xhr = new XMLHttpRequest();
   var o = $id("bar");
   var progress = o.appendChild(document.createElement("p"));
   progress.appendChild(document.createTextNode("upload filename.html"));

   Replace "filename.html" with your own file name.

4. Change the color in the progress bar to show the percentage of the upload progress as the file uploads to the server:

   xhr.upload.addEventListener("progress", function(e) {
   var pc = parseInt(100 - (e.loaded / e.total * 100));
   bar.style.backgroundPosition = pc + "% 0";

References

• Sitepoint: How to Create Graphical File Upload Progress Bars in HTML5 and JavaScript