Progress Bar with Ajax JQuery and PHP for import a .csv file to MySQL <p>I tried to write a code for a progress bar using PHP, JQuery and HTML. So, <strong>I made a Ajax Request for a PHP file</strong> and in the <code>success</code> Ajax parameter I search a <code>data</code> requested from PHP File like this..</p> <pre><code>success: function(data){ if(data == 'Error1'){ alert("The File is not a .csv"); }else if(data == "Error2"){ alert("Please select a file to import!"); }else{ $('#consumidor_table').html(data); alert("The importation has been made!"); } } </code></pre> <p>That <code>else</code> does print a Table with MySql DB lines. The PHP file read a .csv from a HTML input and insert those lines in DB.</p> <p>Actually, my code to do a progress bar is it: <strong>Before at success parameter</strong></p> <pre><code>xhr: function(){ var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; console.log(evt.loaded); console.log(evt.total); console.log(percentComplete*100); addProgress(percentComplete*100); } }); return xhr; }, </code></pre> <p>The entire codes: <a href="https://github.com/AnthonyTailer/consumidor.gov.br/blob/master/src/controller/ImportAjax.js" rel="nofollow">JQuery</a>; <a href="https://github.com/AnthonyTailer/consumidor.gov.br/blob/master/src/controller/ImportCsv.class.php" rel="nofollow">PHP URL</a></p> <p><strong>The Error:</strong> When a upload a file and submit the form, the <code>console.log(evt.total);</code> and <code>console.log(evt.loaded);</code> print the same value, and them the progress bar is fully, but the Ajax continues requesting the PHP file and my table is empty yet.</p> <p>So what I can do to my progress bar work with the response from PHP file?</p>