Отмена xmlhttprequest

Question

Я использую HTML5 для загрузки файлов. У меня есть событие нажатия кнопки, присоединенное к функции uploadFile(). Оно отлично работает. У меня также есть отдельная кнопка для отмены загрузки. Я знаю, что нам нужно вызвать xhr.abort(); Но как мне получить доступ к объекту xhr в функции uploadCanceled? Я могу сделать объект xhr глобальным, но это не так. Может ли кто-нибудь направить меня сюда?

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"); 
    } 

Приветствия

Answer 1

addEventListener установит контекст (this) из uploadCanceled в xhr:

function uploadCanceled(evt) { 
    console.log("Cancelled: " + this.status); 
} 

Пример: http://jsfiddle.net/wJt8A/

---

Если, вместо этого, вам нужно триггер xhr.abort через кнопку «Отмена», вы можете вернуть ссылку и добавить слушателей вам нужно после этого:

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/

Answer 2

Вы должны быть в состоянии ссылаться на «это» ключевое слово в обработчике события canceledUpload. Это относится к XMLHttpRequest. Поместите это в обработчике:

this.abort(); 

Answer 3

Прервать все XMLHttpRequest:

var array_xhr = new Array(); 
function uploadFile(){ 
    ... 
    var xhr = new XMLHttpRequest(); 
    array_xhr.push(xhr); 
    ... 
} 

function abort_all_xhr(){ 
    if (array_xhr.length>0) { 
     for(var i=0; i<array_xhr.length; i++){ 
      array_xhr[i].abort(); 
     } 
     array_xhr.length = 0; 
    }; 
} 

abort_all_xhr();