javascript - 如何取消由 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;
    });
};

有没有办法使用表单的重置按钮来取消上传过程？或者我是否必须导航到当前页面(刷新)才能停止一切？

我尝试创建一个由存储 jqXHR 值的 UploadWidget 对象存储的变量(并调用 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()。