xmlhttprequest

Question

को छोड़कर मैं फ़ाइलों को अपलोड करने के लिए HTML5 का उपयोग कर रहा हूं। मेरे पास फ़ंक्शन अपलोडफाइल() से जुड़ा एक बटन क्लिक ईवेंट है। यह ठीक काम करता है। अपलोड को रद्द करने के लिए मेरे पास एक अलग बटन भी है। मुझे पता है कि हमें xhr.abort() को कॉल करने की आवश्यकता है; लेकिन मैं अपलोड किए गए फ़ंक्शन में xhr ऑब्जेक्ट का उपयोग कैसे करूं? मैं 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

addEventListeneruploadCanceledxhr करने के संदर्भ (this) स्थापित करेगा:

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