How to Create a Progress Bar with jQuery 3 and AJAX?

Estimated read time 3 min read

Here’s an example of how to create a progress bar with jQuery 3 and AJAX:

HTML code:

<!DOCTYPE html>
<html>
<head>
	<title>Progress Bar with jQuery and AJAX</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
		#progress {
			border:1px solid #ccc;
			width:300px;
			height:20px;
			position:relative;
			margin-top:20px;
			display:none;
		}
		
		#progress-bar {
			background-color:#007bff;
			height:20px;
			position:absolute;
			top:0;
			left:0;
			width:0;
			transition:width 0.5s;
		}
		
		#status {
			margin-top:10px;
			display:none;
		}
		
		#response {
			margin-top:10px;
			display:none;
		}
	</style>
</head>
<body>
	<form id="upload-form">
		<label for="file-input">Choose a file to upload:</label>
		<input type="file" id="file-input" name="file">
		<button type="submit">Upload</button>
	</form>
	
	<div id="progress">
		<div id="progress-bar"></div>
	</div>
	
	<div id="status">
		<p>Uploading file...</p>
	</div>
	
	<div id="response">
		<p>Server response:</p>
		<pre></pre>
	</div>
	
	<script>
		$(document).ready(function(){
			$("#upload-form").submit(function(event){
				event.preventDefault();
				
				var formData = new FormData(this);
				var progressBar = $("#progress-bar");
				var progress = $("#progress");
				var status = $("#status");
				var response = $("#response");
				
				progress.show();
				status.show();
				
				$.ajax({
					url: "upload.php",
					type: "POST",
					data: formData,
					processData: false,
					contentType: false,
					xhr: function(){
						var xhr = $.ajaxSettings.xhr();
						
						if(xhr.upload){
							xhr.upload.addEventListener("progress", function(event){
								var percentComplete = Math.round((event.loaded / event.total) * 100);
								progressBar.width(percentComplete + "%");
							}, false);
						}
						
						return xhr;
					},
					success: function(responseText){
						response.show();
						$("pre").text(responseText);
					}
				});
			});
		});
	</script>
</body>
</html>

In this example, we have a form that allows the user to select a file to upload. When the form is submitted, we use AJAX to send the file data to the server for processing.

We also have a div element with the ID “progress” that contains another div element with the ID “progress-bar”. This is our progress bar element.

We also have a div element with the ID “status” and a div element with the ID “response”. These elements will display the status and response messages from the server, respectively.

In the script, we use the submit() method to listen for the form submission event. When the form is submitted, we prevent the default form submission behavior using the preventDefault() method.

We then create a FormData object to send the file data to the server. We also define variables for our progress bar, status, and response elements using the $() syntax.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply