How to check if a user was interrupted by ajax download

Question

I use this piece of code to upload files via ajax to my website:

   jQ(document).on('submit', '#upload_file', function(e) {

      e.preventDefault();
      jQ('#mensagem').html('<div class="loader" style="text-align: center;">Enviando arquivo...</div>');
      jQ.ajaxFileUpload({
         url         :'<?php echo base_url('chamados/anexar_arquivo')?>', 
         secureuri      :false,
         fileElementId  :'userfile',
         dataType    : 'json',
         data        : {
            'desc' : jQ('#desc').val(),
            'chamado' : jQ('#codigochamado').val()
         },
         success : function (data, status)
         {
            if(data.status != 'error')
            {
               jQ('#anexos').html('Carregando anexos...');
               refresh_files();
               jQ('#desc').val('');
                var alert = '<div class="alert alert-success fade in"><button type="button" class="close" data-dismiss="alert">×</button>';
            }
            else
            {
               var alert = '<div class="alert alert-danger fade in"><button type="button" class="close" data-dismiss="alert">×</button>';
            }
            jQ('#mensagem').html(alert+data.msg+'</div>');
         }

      });
   });  

And it works great! The user selects the file, clicks "Download", and then upload the gif to download, until it is replaced by a success message - or error.

The problem is that when the file is downloaded, it is displayed in the browser, and you can cancel the call by pressing the "X" button in the browser. When I do this, the gif download does not disappear, and it continues to show "loading the file ..." even if the download process was interrupted.

Is there a way to check if the download was interrupted, so I can update the screen with the message "upload aborted by user"?

error: function(e){} ajax, , , , .

Answer 1

: HTML5, progress, Ajax , . , - , , . jQuery . . , . 120, ( ) :

var lastProgress;
var lastTime = new Date() / 1000;
$.ajax( { 
    xhr: function(){  
        var xhr = new window.XMLHttpRequest(); 
        xhr.upload.addEventListener("progress", function(evt){
            var newTime = new Date() / 1000;
            if (newTime > lastTime + 120){
                if (evt.lengthComputable) {
                    if (evt.loaded == lastProgress) {
                        ...[stop the upload graphic etc]...
                    } else { 
                        lastTime = newTime;
                        lastProgress = evt.loaded;
                    }
                }
        }, false);
    return xhr;
    },

    url: ... 
        ... [and the rest of the ajax parameters] ...
});

: , , . , , .

-, , .

: JQuery