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>