問(wèn)題描述

我已經(jīng)制作了一個(gè)帶有進(jìn)度條的基于 XHR 的文件上傳器，我想添加一個(gè)功能以在完全上傳之前取消上傳.簡(jiǎn)化的代碼(在 DOM 準(zhǔn)備好后運(yùn)行):

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();
});

在調(diào)用 xhr.abort() 之后，abort 事件處理程序?qū)?'aborted' 打印到控制臺(tái)，但它不執(zhí)行任何其他操作.進(jìn)度條沒(méi)有停止，完成后，整個(gè)文件被上傳.在最新的 Firefox 和 Chrome 上測(cè)試.

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.

我無(wú)法弄清楚我的代碼有什么問(wèn)題.

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

我用 jQuery 也試過(guò)了，代碼:(主要來(lái)自 如何異步上傳文件?)

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();
});

令我驚訝的是，這按預(yù)期工作.當(dāng) jqXHR.abort() 被調(diào)用時(shí)，'aborted' 文本也被打印出來(lái)，進(jìn)程停止，只有部分文件被上傳.問(wèn)題是我想讓我的代碼在未來(lái)獨(dú)立于 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 函數(shù).所以解決方案:

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(){...});

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