Cancelando el xmlhttprequest

Question

Estoy usando HTML5 para cargar archivos. Tengo un evento de clic de botón conectado a la función uploadFile(). Funciona bien. También tengo un botón por separado para cancelar la carga. Sé que debemos llamar a xhr.abort(); Pero, ¿cómo accedo al objeto xhr en la función uploadCanceled? Puedo hacer que el objeto xhr sea global, pero esa no es la forma correcta. ¿Puede alguien guiarme aquí?

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

Saludos

Answer 1

addEventListener establecerá el contexto (this) de uploadCanceled a xhr:

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

Ejemplo: http://jsfiddle.net/wJt8A/

---

Si, en cambio, es necesario disparar xhr.abort a través de un clic en "Cancelar", puede devolver una referencia y agregar cualquier oyente que necesita después de que:

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

Ejemplo: http://jsfiddle.net/rC63r/1/

Answer 2

Usted debe ser capaz de hacer referencia a la palabra "this" en el controlador de eventos canceledUpload. Eso se refiere a XMLHttpRequest. Poner esto en el controlador:

this.abort(); 

Answer 3

Abortar todos 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();