XHR 中止不会停止文件上传

Question

我做了一个基于 XHR 的带进度条的文件上传器，我想添加一个功能来在上传完全之前取消上传。简化代码（在 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() 后，中止事件处理程序将 '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() 时，也会打印 'aborted' 文本，进程停止，并且只上传了部分文件。问题是我想让我的代码在将来独立于 jquery，我还不明白为什么我的代码不能以同样的方式工作。

Answer 1

好的，我注意到事件名称是 onabort。在 xhr.abort = ... 行中，我覆盖了中止函数。所以解决方案：

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

或

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

Answer 2

我也遇到了同样的问题

XMLHttpRequest.abort() 停止通知 XMLHttpRequest.uplad.progress.

XMLHttpRequest.abort()无法停止Chrome(63.0.3239.132)上传文件。

我尝试了 formObject.reset() 并上传了 1G 文件并且它有效。

windows 任务管理器中的网络使用率在调用 formObject.reset() 后降为零。

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre><code><script>
function cancelUploadFile() {
  document.getElementById("my_form").reset();
}
</script>

<form id="my_form" method="post" enctype="multipart/form-data">
  <div class="w3-grey"  style="height:24px;width:0%" hidden 
id="progressBar"></div>
  <input type="file" id="file1" name="file1">
  <input type="submit" value="Upload" onclick="uploadFile()">
  <input type="submit" value="Cancel" onclick="cancelUploadFile()">
</form>

Answer 3

我一直在搜索论坛，发现很多解决方案都失败了......除了 Ivan Tsai 的回复。

abort 方法将触发服务器上的错误处理程序和请求对象的中止事件，但不会停止上传。

收到中止事件后，我无法成功停止从服务器上传。以下均失败：

request.pause();
request.socket.end();
request.connection.end();
request.destroy();

response.status(413).send(message);
response.end();

我发现停止下面上传的唯一有效方法是 HTMLFormElement.reset() 方法。有趣的是，调用一个file类型的input的reset方法是不行的，但是可以将单个input包裹在一个单例的form元素中，比如下面的uploadForm，达到预期的效果。

var formData = new FormData(uploadForm),
    files = fileInput.files,
    xhr;

if(files) {
   for (var i = 0, stop = files.length; i < stop; i++) {
       formData.append(files[i].name, files[i]);
   }

   xhr = new XMLHttpRequest();
   xhr.open('POST', uploadForm.getAttribute('action'), true);
   progressListener = xhr.upload.addEventListener("progress", progressHandler, true);
   xhr.upload.addEventListener("abort", abortHandler, true);
   xhr.send(formData);
}

abortButton.addEventListener(function(){
    if(xhr){
        xhr.abort();
    }
    uploadForm.reset();
});

Answer 4

您也可以使用 window.location.reload() 重新加载页面，或者您可以使用 window.location.href = UrlOfNewPage 切换到另一个页面。

如果这不起作用，请检查您用于取消上传的功能是否会被执行，例如使用 console.log

输出一些内容

XHR 中止不会停止文件上传

XHR abort doesn't stop file uploading

javascript

file-upload

xmlhttprequest

abort