中止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屋！