how to implement progress bar based on ajax response

Question

I have try to implement progress bar based on ajax response from server side (PHP).but i can't identify the progress bar calculation like how to calculate the progress bar timing between request and response of submit form through ajax.

<script> $('.uploadProject').on('submit',function(e){ e.preventDefault(); //ray.ajax(); var formData = new FormData($(this)[0]); progress(80, $('#progressBar')); $.ajax({ url: "ajax/submitted_project_action.php", type: "POST", data: formData, async: false, success: function (data) { if(data==1){ window.location.href="submitted_project.php?success"; }else{ window.location.href="submitted_project.php?error"; } }, cache: false, contentType: false, processData: false }); })

 <script> function progress(percent, $element) { var progressBarWidth = percent * $element.width() / 100; $element.find('div').animate({ width: progressBarWidth },500).html(percent + "%&nbsp;"); } </script>

My HTML COde

 <style> #progressBar { width: 400px; height: 22px; border: 1px solid #111; background-color: #292929; } #progressBar div { height: 100%; color: #fff; text-align: right; line-height: 22px; /* same as #progressBar height if we want text middle aligned */ width: 0; background-color: #0099ff; } </style> <div id="progressBar"><div></div></div>

Correct solution can be found here: stackoverflow.com/a/19127053/2963579 — Sanyam Jain
– Sanyam Jain, Commented Sep 12, 2016 at 7:21

ColonelHedgehog · Accepted Answer · 2015-05-02 19:46:09Z

The good way would be to listen to the "progress" event listener.

Example:

$.ajax({ type: 'POST', // GET/POST url: "/", // Some URL data: {}, // Misc data beforeSend: function(XMLHttpRequest) // Do the following before sending the request { //Upload progress XMLHttpRequest.upload.addEventListener("progress", function(event) // Add a "progress" listener. { if (evt.lengthComputable) { var percentComplete = (event.loaded / event.total) * 100; // You can use this data for your progress bar. } }, false); }, success: function(data) { // Here, you can make your progress bar green or something. } });

i got error while run this above code. TypeError: XMLHttpRequest.upload is undefined

Collectives™ on Stack Overflow

how to implement progress bar based on ajax response

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related