I want to abort my AJAX file upload, using XML abort function.
Below is script (jQuery), showing my AJAX request call:
var jqXHR = new window.XMLHttpRequest();
$("#file_uploading").change(function(e) {
var fullPath = $('#File-upload-0').val();
var output = fullPath.substr(0, fullPath.lastIndexOf('.')) || fullPath;
var filename = output.replace(/^.*\\/, "");
$('#cancel_btn').removeClass('hidden');
//console.log(filename);
$('#f_name').val(filename);
$('#reupload_block_cl').addClass('alert-success').removeClass('alert-danger');
$('#loader').removeClass('hidden');
e.preventDefault();
$.ajax({
url: window.reuploading_file,
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data) {
//alert(data.success);
if (data.success) {
$('#cancel_btn').addClass('hidden');
$('#loader').addClass('hidden');
$('#reupload_block_msg').html(data.success);
$('#reupload_block').removeClass('hidden');
}
},
error: function(data) {
//alert(data.success);
var obj = jQuery.parseJSON(data.responseText);
var str = obj['file'][0];
if (str.startsWith("The file may not be greater than")) {
$('#loader').addClass('hidden');
$('#cancel_btn').addClass('hidden');
$('#reupload_block_msg').html(str);
$('#reupload_block_cl').addClass('alert-danger')
.removeClass('alert-success');
$('#reupload_block').removeClass('hidden');
} else {
$('#loader').addClass('hidden');
$('#cancel_btn').addClass('hidden');
$('#reupload_block_msg').html(str);
$('#reupload_block_cl').addClass('alert-danger')
.removeClass('alert-success');
$('#reupload_block').removeClass('hidden');
}
}
});
});
and on the cancel button click, what I want to achieve is: to abort AJAX request.
Below is my cancel button click function script (jQuery) which is not working as expected:
$('#final_upload').on('click', function() {
jqXHR.abort();
$('#loader').addClass('hidden');
});
What am I doing wrong and how can I resolve it?
Check this.
http://api.jquery.com/jQuery.ajax/#jqXHR
The jqXHR object is not var jqXHR = new window.XMLHttpRequest();
.
It should be var jqXHR = $.ajax(param);