XHR中止不会停止文件上传
我已经做了一个基于XHR的文件上传器，带有进度条，我想在完全上传之前添加一个取消上传的功能。简化的代码(在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上进行了测试。
我不知道我的代码出了什么问题。
编辑：
我已经用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，我还不明白为什么我的代码不能以同样的方式工作。
回答 3
Stack Overflow用户
发布于 2016-06-11 01:41:52
好的，我注意到事件名称是onabort。使用xhr.abort = ...行，我重写了abort函数。所以解决方案是：
xhr.onabort = function(){...};
或
xhr.addEventListener("abort", function(){...});
Stack Overflow用户
发布于 2018-06-09 03:31:14
我一直在搜索论坛，发现了许多针对Ivan Tsai的回应而导致miserably...except失败的解决方案。
abort方法将触发服务器上的错误处理程序和请求对象的abort事件，但它不会停止上载。
在接收到abort事件时，我没有成功地停止来自服务器的上传。以下所有操作均失败：
request.pause();
request.socket.end();
request.connection.end();
request.destroy();
response.status(413).send(message);
response.end();我找到的停止上传的唯一有效方法是HTMLFormElement.reset()方法。有趣的是，调用文件类型的输入的reset方法将不起作用，但可以将单个输入包装在单个表单元素中，如下面的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();
});Stack Overflow用户
发布于 2021-08-04 16:34:58
您还可以使用window.location.reload()重新加载页面，或者使用window.location.href = UrlOfNewPage切换到其他页面。
如果此操作不起作用，请检查是否将执行用于取消上传的函数，例如使用console.log输出某些内容
https://stackoverflow.com/questions/37620165
复制相似问题