問題描述

我已經制作了一個帶有進度條的基于 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(){...});

這篇關于XHR 中止不會停止文件上傳的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！