单击按钮时中止 AJAX 请求
Abort AJAX request on button click
我想使用 XML 中止功能中止我的 AJAX 文件上传。
下面是脚本 (jQuery),显示了我的 AJAX 请求调用:
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');
}
}
});
});
然后单击取消按钮,我想要实现的是:中止 AJAX 请求。
下面是我的取消按钮点击函数脚本 (jQuery),它没有按预期工作:
$('#final_upload').on('click', function() {
jqXHR.abort();
$('#loader').addClass('hidden');
});
我做错了什么,我该如何解决?
检查这个。
http://api.jquery.com/jQuery.ajax/#jqXHR
jqXHR 对象不是 var jqXHR = new window.XMLHttpRequest();
。
应该是var jqXHR = $.ajax(param);
我想使用 XML 中止功能中止我的 AJAX 文件上传。
下面是脚本 (jQuery),显示了我的 AJAX 请求调用:
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');
}
}
});
});
然后单击取消按钮,我想要实现的是:中止 AJAX 请求。
下面是我的取消按钮点击函数脚本 (jQuery),它没有按预期工作:
$('#final_upload').on('click', function() {
jqXHR.abort();
$('#loader').addClass('hidden');
});
我做错了什么,我该如何解决?
检查这个。
http://api.jquery.com/jQuery.ajax/#jqXHR
jqXHR 对象不是 var jqXHR = new window.XMLHttpRequest();
。
应该是var jqXHR = $.ajax(param);