web-dev-qa-db-fra.com

Abandon de la requête xmlhtt.

J'utilise HTML5 pour télécharger des fichiers. J'ai un événement de clic sur un bouton associé à la fonction uploadFile(). Ça fonctionne bien. J'ai aussi 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. Est-ce que quelqu'un peut 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");
    }

À votre santé

javascripthtml5xmlhttprequest
15
lewis

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

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

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

Si, au lieu de cela, vous devez déclencher xhr.abort par un clic "Annuler", vous pouvez renvoyer une référence et ajouter les écouteurs dont vous avez besoin par la suite:

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/

16
Jonathan Lonowski

Vous devriez pouvoir référencer le mot-clé "this" dans votre gestionnaire d'événements cancelledUpload. Cela fait référence à XMLHttpRequest. Mettez ceci dans le gestionnaire:

this.abort();
2
dnuttle

Abandonner tout 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();
0
Jack