JqXHR.bort is not a function

Question

I am trying to make a cancel button to load a jquery file ( http://blueimp.imtqy.com/jQuery-File-Upload/ ).

My code is:

var jqXHR = $('#fileupload').fileupload({ url: 'server/index.php', dataType: 'json', dropZone: $('#dropzone'), }) $('button.cancel').click(function (e) { jqXHR.abort(); alert("cancel"); }); 

When I press the cancel button, the cancel button does not work, and I get the error "jqXHR.abort is not a function".

What do I need to do to get the cancel button to cancel the download of files?

Answer 1

In accordance with the documentation, this should be done as follows.

 var jqXHR = null; $('#fileupload').fileupload({ url: 'server/index.php', dataType: 'json', dropZone: $('#dropzone'), add: function (e, data) { jqXHR = data.submit(); } }); 

Now you can access a jqXHR object like this

 $('button.cancel').click(function (e) { jqXHR.abort(); }); 

---

For multiple interrupts, the method would be

 $('#fileupload').fileupload({ add: function(e, data) { $('.progress_bar_wrapper').append($('.progress_context:first').clone()); data.context = $('.progress_context:last'); data.content.find('.abort').click(abortUpload ); var xhr = data.submit(); data.context.data('data',{jqXHR: xhr}); // so much data... } )}; function abortUpload (e) { e.preventDefault(); var template = $(e.currentTarget).closest('.template-upload'), data = template.data('data') || {}; // data, data , data (queue Monty Python skit) if (!data.jqXHR) { data.errorThrown = 'abort'; this._trigger('fail', e, data); } else { data.jqXHR.abort(); } } 

Link: https://github.com/blueimp/jQuery-File-Upload/issues/290

Answer 2

As the API document says, you must use the send method to return jqXHR . This will work for you.

 var jqXHR = $('#fileupload').fileupload('send', { url: 'server/index.php', dataType: 'json', dropZone: $('#dropzone'), }); $('button.cancel').click(function (e) { jqXHR.abort(); alert("cancel"); });