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