title: Abort a multiple file upload AJAX request
body: <p>I am trying to abort a multiple file upload with a progress bar, showing the state of the process.</p>
  
  <p>What I want to achieve is to completely abort the multiple file upload on the abort button click; to stop the progress bar as well as to clear every file(s) that might have been uploaded during the course of the initially triggered multiple file upload process.</p>
  
  <p>Below is my code:</p>
  
  <pre><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();
  });
  </code></pre>
  
  <p>I use the code above to dynamically upload images with a progress bar.</p>
  
  <p>I found lots of articles using <code>.abort()</code> to stop the process, but that seemed to only work browser side and not server side.</p>
  
  <p>In what way can I cease the upload completely as in: on both client and server side as <code>.abort()</code> does not enable me get the desirable result?</p>