Two examples of how to monitor the upload and download progress a HTTP request, created from a form with a file, and display it as a progress bar.
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> | |
</head> | |
<body> | |
<!--[if IE]> | |
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> | |
<![endif]--> | |
<form id="form-upload"> | |
<div class="form-group"> | |
<label for="name">Name</label> | |
<input type="text" class="form-control" id="name"> | |
</div> | |
<div class="form-group"> | |
<label for="email">Email address</label> | |
<input type="email" class="form-control" id="email"> | |
</div> | |
<div class="form-group"> | |
<label for="file">Upload file</label> | |
<input type="file" class="form-control-file" id="file"> | |
</div> | |
<button type="submit" class="btn btn-primary">Submit</button> | |
</form> | |
<div id="upload-progress" class="progress"> | |
<div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div> | |
</div> | |
<div id="download-progress" class="progress"> | |
<div id="download-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div> | |
</div> | |
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> | |
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> | |
<script type="text/javascript"> | |
$(document).ready(function() { | |
$("#form-upload").on('submit',(function(e) { | |
e.preventDefault(); | |
$.ajax({ | |
url: "<url>", // Add URL here | |
type: "<method>", // Add method here | |
enctype: 'multipart/form-data', | |
data: new FormData($('#form-upload')[0]), | |
contentType: false, | |
processData: false, | |
cache: false, | |
xhr: function() { | |
// Create a new instance of the object XMLHttpRequest | |
// with attached listeners for upload and download | |
// progress to be used for sending a HTTP request. | |
let xhr = new window.XMLHttpRequest(); | |
// Upload progress | |
xhr.upload.addEventListener("progress", function(evt) { | |
if (evt.lengthComputable) { | |
// Update the upload progress bar with current progress | |
let percentComplete = Math.round((evt.loaded / evt.total) * 100); | |
$('#upload-progress-bar').css('width', percentComplete + '%'); | |
} | |
}, false); | |
// Download progress | |
xhr.addEventListener("progress", function(evt) { | |
if (evt.lengthComputable) { | |
// Update the download progress bar with current progress | |
let percentComplete = Math.round((evt.loaded / evt.total) * 100); | |
$('#download-progress-bar').css('width', percentComplete + '%'); | |
} | |
}, false); | |
return xhr; | |
}, | |
success: function() { | |
console.log('File uploaded successfully.'); | |
}, | |
error: function() { | |
console.log('Error while uploading.'); | |
} | |
}); | |
})); | |
}); | |
</script> | |
</body> | |
</html> |
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> | |
</head> | |
<body> | |
<!--[if IE]> | |
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> | |
<![endif]--> | |
<form id="form-upload"> | |
<div class="form-group"> | |
<label for="name">Name</label> | |
<input type="text" class="form-control" id="name"> | |
</div> | |
<div class="form-group"> | |
<label for="email">Email address</label> | |
<input type="email" class="form-control" id="email"> | |
</div> | |
<div class="form-group"> | |
<label for="file">Upload file</label> | |
<input type="file" class="form-control-file" id="file"> | |
</div> | |
<button type="submit" class="btn btn-primary">Submit</button> | |
</form> | |
<div id="upload-progress" class="progress"> | |
<div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div> | |
</div> | |
<div id="download-progress" class="progress"> | |
<div id="download-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div> | |
</div> | |
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> | |
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> | |
<script type="text/javascript"> | |
$(document).ready(function() { | |
$("#form-upload").on('submit',(function(e) { | |
e.preventDefault(); | |
$.ajax({ | |
url: "<url>", // Add URL here | |
type: "<method>", // Add method here | |
enctype: 'multipart/form-data', | |
data: new FormData($('#form-upload')[0]), | |
contentType: false, | |
processData: false, | |
cache: false, | |
xhr: function() { | |
// Create a new instance of the object XMLHttpRequest | |
// with attached listeners for upload and download | |
// progress to be used for sending a HTTP request. | |
let xhr = new window.XMLHttpRequest(); | |
// Upload progress | |
xhr.upload.onprogress = function (evt) { | |
if (evt.lengthComputable) { | |
// Update the upload progress bar with current progress | |
let percentComplete = Math.round((evt.loaded / evt.total) * 100); | |
$('#upload-progress-bar').css('width', percentComplete + '%'); | |
} | |
}; | |
// Download progress | |
xhr.onprogress = function (evt) { | |
if (evt.lengthComputable) { | |
// Update the download progress bar with current progress | |
let percentComplete = Math.round((evt.loaded / evt.total) * 100); | |
$('#download-progress-bar').css('width', percentComplete + '%'); | |
} | |
}; | |
return xhr; | |
}, | |
success: function() { | |
console.log('File uploaded successfully.'); | |
}, | |
error: function() { | |
console.log('Error while uploading.'); | |
} | |
}); | |
})); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment