Question

我使用ajax动态上传许多文件，我想添加一个按钮，停止在服务器和浏览器端上传。我试图添加XHR，不幸的是它不起作用我无法处理它

我的代码：

    $('body').on('click', '.start-upload', start_upload);


function start_upload(){
    $('.start-upload').remove();
    $('.upload-content').append('<div class="button blue stop-upload">Stop upload</div>');
    var upload = 0; // upload one file, 2, 3, 4



    $(document).on('ajax', function(){
        if (uploadfiles[upload]=='undefined'){ return false; }

        var file = uploadfiles[upload];
        var form = new FormData();
        form.append('file', file);
        var XHR = new window.XMLHttpRequest();
        $.ajax({
           'type':'POST',
           'url':'s1/index.php',
           'data': form, 
           'contentType': false,
           'processData': false,
           'success': function(r){



               upload++;
               $(document).trigger('ajax');
           }
        });

    }).trigger('ajax');
}


$('body').on('click', '.stop-upload', stop_upload);
function stop_upload(){
     XHR.abort();
}

Answer 1

var XHR = new window.XMLHttpRequest();

这与XMLHttpRequest调用在其底层代码中使用的jQuery.ajax()实例不同。它将使用自己的实例。

来自文档：

http://api.jquery.com/jquery.ajax/

为了向后兼容XMLHttpRequest，jqXHR对象将会   公开以下属性和方法：

...

abort（[statusText]）

因此，如果您想要中止ajax调用，请保存jQuery.ajax()的结果并从中调用abort，而不是XMLHttpRequest的新实例：

var request;

//inside the callback
request = $.ajax({});

//Some Other Place
request.abort();

停止动态上传xhr文件

1 个答案: