如何在jQuery中取消由ajaxSubmit（）启动的文件上传？

Question

我的代码类似于以下内容：

UploadWidget.prototype.setup_form_handling = function() {
    var _upload_widget = this;
    $('form#uploader')
    .unbind('trigger-submit-form')  // This might be our company's own method
    .bind('trigger-submit-form', function() {
        var $form = $(this);
        $form.ajaxSubmit({
            dataType: 'json',
            success: function(data, status, xhr, form) {
                // ...
            },
            error: function(xhr, status, errorThrown) {
                // ...
            }
        });
        return false;
    });
};

有没有办法使用表单的重置按钮来取消上传过程？或者我是否必须导航到当前页面（刷新）才能阻止所有内容？

我尝试使用UploadWidget对象存储一个存储jqXHR值的变量（并调用var _upload_widget.jqXHR = $form.ajaxSubmit({ ... });），但我认为我做得不对。

Answer 1

与jQuery.ajax()不同，jQuery表单插件的ajaxForm()和ajaxSubmit()不会返回jqXHR对象。不过还有其他方法可以获取jqXHR对象：

表单对象上的

data()方法（最简单的方法）

ajaxSubmit()返回表单对象。您可以在此表单对象上调用data()方法来获取XHR对象：

var form = $('#myForm').ajaxSubmit({ ... });
var xhr = form.data('jqxhr');

如果要中止上传，请致电xhr.abort()。

此功能已于2012年12月添加;见issue 221。 （shukshin.ivan的答案是第一个指出这一点的人。）

beforeSend回调（对于2012年12月之前的jQuery Form版本）

除了options listed in the jQuery form plugin site之外，ajaxForm()和ajaxSubmit()也将采用任何jQuery.ajax() options。其中一个选项是beforeSend回调，回调签名为beforeSend(jqXHR, settings)。

因此，指定一个beforeSend回调函数，jqXHR对象将作为该回调的第一个参数传入。保存该jqXHR对象，然后当您想要中止上传时，可以在该jqXHR对象上调用abort()。

Answer 2

自2012年12月起，可以直接访问xhr：

var form = $('#myForm').ajaxSubmit({ ... });
var xhr = form.data('jqxhr');
....
$('#cancel').on('click', function(){
    xhr.abort();
});

src - https://github.com/malsup/form/issues/221

Answer 3

您可以这样使用：

var myForm  = null; 
myForm = $('#myForm').ajaxSubmit({
               url: ajaxUrl,
               beforeSubmit : function() {
                   if(myForm != null)
                      myForm.data('jqxhr').abort();
                   },
               ...
          });

这将停止以前的ajaxSubmit请求。

Answer 4

尝试

window.stop();

模仿按下的停止按钮。不完全确定IE喜欢它。对于IE，您可以尝试：

document.execCommand('Stop');