我已经做了一个基于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,我还不明白为什么我的代码不能以同样的方式工作。
发布于 2016-06-11 01:41:52
好的,我注意到事件名称是onabort。使用xhr.abort = ...
行,我重写了abort函数。所以解决方案是:
xhr.onabort = function(){...};
或
xhr.addEventListener("abort", function(){...});
发布于 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();
});
发布于 2021-08-04 16:34:58
您还可以使用window.location.reload()
重新加载页面,或者使用window.location.href = UrlOfNewPage
切换到其他页面。
如果此操作不起作用,请检查是否将执行用于取消上传的函数,例如使用console.log
输出某些内容
https://stackoverflow.com/questions/37620165
复制相似问题