Annulation de la xmlhttprequest

Question

J'utilise HTML5 pour télécharger des fichiers. J'ai un événement de clic de bouton attaché à la fonction uploadFile(). Cela fonctionne très bien. J'ai également un bouton séparé pour annuler le téléchargement. Je sais que nous devons appeler xhr.abort(); Mais comment puis-je accéder à l'objet xhr dans la fonction uploadCanceled? Je peux rendre l'objet xhr global mais ce n'est pas la bonne façon. Quelqu'un peut-il me guider ici?

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

Vive

Answer 1

addEventListener va définir le contexte (this) de uploadCanceled à xhr:

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

Exemple: http://jsfiddle.net/wJt8A/

---

Si, au contraire, vous devez déclencher xhr.abort via un clic "Annuler", vous pouvez renvoyer une référence et ajouter des écouteurs vous avez besoin après:

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

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

Answer 2

Vous devriez être en mesure de faire référence à la « ce » mot-clé dans votre gestionnaire d'événements canceledUpload. Cela fait référence à XMLHttpRequest. Mettre cela dans le gestionnaire:

this.abort(); 

Answer 3

Abandonner tous 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();