XHR 中止不会停止文件上传

2022-01-15 00:00:00 file-upload abort xmlhttprequest javascript

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

I've made an XHR-based file uploader with progressbar, and I would like to add a feature to cancel the upload before it fully uploaded. The simlified code (runs after DOM ready): 

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 上测试.

After the xhr.abort() called, the abort event handler prints the 'aborted' to the console, but it doesn't do anything else. The progress bar doesn't stop, and after it finished, the entire file is uploaded. Tested on the latest Firefox and Chrome.

我无法弄清楚我的代码有什么问题.

I can't figure out what is wrong with my code.

我用 jQuery 也试过了，代码:(主要来自 如何异步上传文件?)

I've tried the same with jQuery, the code: (mostly from 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() 被调用时，'aborted' 文本也被打印出来，进程停止，只有部分文件被上传.问题是我想让我的代码在未来独立于 jquery，但我还不明白为什么我的代码不能以同样的方式工作.

To my surprise, this is working as expected. When the jqXHR.abort() called, the 'aborted' text also printed, the process stopped, and only part of the file have been uploaded. The problem is I want to make my code independent of jquery in the future, and I don't understand yet why my code isn't working the same way.

推荐答案

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

Ok, I noticed that the event name is onabort. With the xhr.abort = ... line I overwrote the abort function. So the solution:

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

或

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

相关文章