Abort a Download Request for Multiple AJAX Files

Question

I am trying to interrupt multiple downloads of a progress bar file showing the status of the process.

What I want to achieve is to completely abort multiple file downloads when I click abort; to stop the progress bar, and also to clear every file (s) that might have been downloaded during the initiated process of downloading multiple files.

Below is my code:

var AJAX = $.ajax({ xhr: function() { var XHR = new window.XMLHttpRequest(); XHR.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { var PROGRESS = Math.round((e.loaded/e.total)*100); $('#PROGRESS_BAR').text(PROGRESS); } }, false); return XHR; }, url : '/php.php', type : 'POST', data : DATA, cache : false, processData: false, contentType: false, beforeSend : function() { }, success : function() { } }); $(document).on('click', '.ABORT', function(e) { AJAX.abort(); }); 

I use the above code to dynamically load images with a progress bar.

I found many articles using .abort() to stop the process, but it seems to work only on the browser side, not the server side.

How can I completely stop loading, as in: on the client and server side, since .abort() does not allow me to get the desired result?

Answer 1

Try the following:

 var XHR = new window.XMLHttpRequest(); var AJAX = $.ajax({ xhr: function() { XHR.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { var PROGRESS = Math.round((e.loaded/e.total)*100); $('#PROGRESS_BAR').text(PROGRESS); } }, false); return XHR; }, url : '/php.php', type : 'POST', data : DATA, cache : false, processData: false, contentType: false, beforeSend : function() { }, success : function() { } }); $(document).on('click', '.ABORT', function(e){ XHR.abort(); });