Show a progress bar for downloading files using XHR2/AJAX
<p>I am trying to download files using Ajax and show a custom <strong>download progress bar.</strong></p>

<p>The problem is I can't understand how to do so. I wrote the code to log the progress but don't know how to initiate the download.</p>

<p><strong>NOTE:</strong> The files are of different types.</p>

<p>Thanks in advance.</p>

<p><strong>JS</strong></p>

<pre><code>// Downloading of files
filelist.on('click', '.download_link', function(e){
    e.preventDefault();
    var id = $(this).data('id');
    $(this).parent().addClass("download_start");

    $.ajax({
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            // Handle Download Progress
            xhr.addEventListener("progress", function (evt) {
                if(evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                }
            }, false);
            return xhr;
        },
        complete: function () {
            console.log("Request finished");
        }
    })
});
</code></pre>

<p><strong>HTML and PHP</strong></p>

<pre><code>    &lt;li&gt;
    &lt;div class="f_icon"&gt;&lt;img src="' . $ico_path . '"&gt;&lt;/div&gt;
    &lt;div class="left_wing"&gt;
       &lt;div class="progressbar"&gt;&lt;/div&gt;
       &lt;a class="download_link" href="#" id="'.$file_id.'"&gt;&lt;div class="f_name"&gt;' . $full_file_name . '&lt;/div&gt;&lt;/a&gt;
       &lt;div class="f_time_size"&gt;' . date("M d, Y", $file_upload_time) . '&amp;nbsp; &amp;#149; &amp;nbsp;' . human_filesize($file_size) . '&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="right_wing"&gt;
       &lt;div class="f_delete"&gt;
       &lt;a class="btn btn-danger" href="#" aria-label="Delete" data-id="'.$file_id.'" data-filename="'.$full_file_name.'"&gt;&lt;i class="fa fa-trash-o fa-lg" aria-hidden="true" title="Delete this?"&gt;&lt;/i&gt;
       &lt;/a&gt;
    &lt;/div&gt;
   &lt;/div&gt;
    &lt;/li&gt;
</code></pre>