Скачать или смотреть How to Set a Progress Bar from 0 to 100% for Each Uploaded Image Separately

A comprehensive guide to sequentially upload multiple images using XMLHttpRequest with individual progress bars for each image.
---
This video is based on the question https://stackoverflow.com/q/76642094/ asked by the user 'provance' ( https://stackoverflow.com/u/10983537/ ) and on the answer https://stackoverflow.com/a/76642513/ provided by the user 'mplungjan' ( https://stackoverflow.com/u/295783/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to set progress bar from 0 to 100% for each uploaded image separately

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Uploading Multiple Images with Sequential Progress Bars

In today's digital world, sharing images is a common activity. However, when it comes to uploading multiple images, we often run into issues, especially if we want a smooth user experience with individual progress tracking. If you've ever noticed a flickering progress bar or simultaneous load messages in the console while uploading multiple images, you’re not alone.

The Problem

When uploading images using AJAX, the requests can sometimes execute simultaneously rather than in sequence. This leads to:

Flickering Progress Bar: The user sees constant movement back and forth in the progress bar.

Simultaneous Completion: The console logs all requests as finished at the same time, making it difficult to track the upload status of individual images.

If you attempt to use synchronous XMLHttpRequest (i.e., setting it to false), the progress bar won't function at all, which is not the desired outcome.

So, how can we achieve a smooth, sequential upload where each image’s progress is tracked individually?

The Solution

Let’s break down the solution into clear, manageable steps. Here's a modified and optimized approach to achieve what you want.

Step 1: Initial Setup

First, ensure you have the necessary HTML elements to upload images and display the progress. Here’s a simple setup:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: JavaScript for Sequential Uploads

The trick is to handle the XMLHttpRequests sequentially. Instead of looping through the files directly, we will maintain a count variable and upload images one by one. Here's how:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

File Selection: The input element allows multiple file uploads.

Variables: files holds the selected files, cnt tracks the index of the currently uploading file, and max is the total number of files.

Progress Tracking: The up_progress function calculates and updates the progress bar percentage as each file uploads.

Sequential Uploading: The upload function checks if there are more files to process. It initiates an XMLHttpRequest for each file and sets up event listeners for tracking progress and completion.

Benefits

Smooth User Experience: Users can see individual progress for each file, enhancing feedback during uploads.

Control Over Process: Sequential uploads can help manage server load and avoid overwhelming the server with simultaneous requests.

Conclusion

By following this method, you can achieve a functional, user-friendly image upload system where each image displays its own progress bar moving from 0 to 100%. This not only improves the aesthetics of your application but also enhances the overall user interaction experience.

Give it a try, and you’ll find the satisfaction of seeing each photo get uploaded smoothly and successfully!