javascript - XHR 中止不会停止文件上传

Question

我制作了一个带有进度条的基于 XHR 的文件 uploader ，我想添加一个功能来在完全上传之前取消上传。简化的代码(在 DOM 准备好后运行):

var xhr;

$('#upload').click(function(){
    var file = $('#file').get(0).files[0];
    xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function(event){
        if (event.lengthComputable){
            var percent = event.loaded / event.total;
            $('#uploadpercent').html(Math.round(percent * 100) + "%");
        }
    };
    xhr.abort = function(){
        console.log('aborted');
    };
    xhr.onload = function(){
        $('#uploadpercent').html("100%");
        // ...
    };
    xhr.open("POST", "upload.php?filename=" + file.name);
    xhr.send(file);
});

$('#cancel').click(function(){
    xhr.abort();
});

调用 xhr.abort() 后，abort 事件处理程序将“aborted”打印到控制台，但不执行任何其他操作。进度条不停，完成后，整个文件上传完毕。在最新的 Firefox 和 Chrome 上进行了测试。

我无法弄清楚我的代码出了什么问题。

编辑:

我用 jQuery 尝试过同样的操作，代码:(大部分来自How can I upload files asynchronously?)

var jqXHR;

$('#upload').click(function(){
    var file = $('#file').get(0).files[0];
    jqXHR = $.ajax({
        type : "POST",
        url : "upload.php?filename=" + file.name,
        data : file,
        xhr: function(){
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload){
                myXhr.upload.addEventListener('progress', function(event){
                    if (event.lengthComputable){
                        var percent = event.loaded / event.total;
                        $('#uploadpercent').html(Math.round(percent * 100) + "%");
                    }
                }, false);
            }
            return myXhr;
        },
        success : function(response){
            $('#uploadpercent').html("100%");
            if (response.length > 0){
                console.log(response);
            }
        },
        error : function(_jqXHR, textStatus){
            if (textStatus === "abort"){
                console.log('aborted');
            }
        },
        cache : false,
        contentType : false,
        processData : false
    });
});

$('#cancel').click(function(){
    jqXHR.abort();
});

令我惊讶的是，这按预期工作。当调用 jqXHR.abort() 时，还会打印“已中止”文本，进程停止，并且仅上传了部分文件。问题是我想让我的代码将来独立于 jquery，但我还不明白为什么我的代码不能以同样的方式工作。

Answer 1

好的，我注意到事件名称是 onabort。使用 xhr.abort = ... 行我覆盖了 abort 函数。所以解决办法:

xhr.onabort = function(){...};

或

xhr.addEventListener("abort", function(){...});