中止xmlhttprequest [英] Aborting the xmlhttprequest
问题描述
我使用HTML5上传文件。我有一个按钮单击事件附加到函数uploadFile()。它工作正常。我也有一个单独的按钮来取消上传。我知道我们需要调用xhr.abort();但是,如何访问uploadCanceled函数中的xhr对象?我可以使xhr对象成为全局的,但这不是正确的方法。有人可以指导我吗?
I am using HTML5 for uploading files . I have a button click event attached to the function uploadFile().It works fine. I also have a separate button to cancel the upload . I know we need to call xhr.abort(); But how do I access the xhr object in the uploadCanceled function ? I can make the xhr object global but that is not the proper way . Can someone guide me here ?
function uploadFile(){
var filesToBeUploaded = document.getElementById("fileControl");
var file = filesToBeUploaded.files[0];
var xhr= new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "upload.php", true);
var fd = new FormData();
fd.append("fileToUpload", file);
xhr.send(fd);
}
function uploadCanceled(evt) {
alert("Upload has been cancelled");
}
干杯
推荐答案
addEventListener
将设置 this
) > uploadCanceled 到 xhr
:
addEventListener
will set the context (this
) of uploadCanceled
to xhr
:
function uploadCanceled(evt) {
console.log("Cancelled: " + this.status);
}
示例: http://jsfiddle.net/wJt8A/
如果,相反,你需要通过取消点击触发 xhr.abort
,你可以返回一个引用并添加你需要的所有听众:
If, instead, you need to trigger xhr.abort
through a "Cancel" click, you can return a reference and add any listeners you need after that:
function uploadFile() {
/* snip */
xhr.send(fd);
return xhr;
}
document.getElementById('submit').addEventListener('click', function () {
var xhr = uploadFile(),
submit = this,
cancel = document.getElementById('cancel');
function detach() {
// remove listeners after they become irrelevant
submit.removeEventListener('click', canceling, false);
cancel.removeEventListener('click', canceling, false);
}
function canceling() {
detach();
xhr.abort();
}
// detach handlers if XHR finishes first
xhr.addEventListener('load', detach, false);
// cancel if "Submit" is clicked again before XHR finishes
submit.addEventListener('click', canceling, false);
// and, of course, cancel if "Cancel" is clicked
cancel.addEventListener('click', canceling, false);
}, false);
示例: http://jsfiddle.net/rC63r/1/
这篇关于中止xmlhttprequest的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!