Hủy bỏ xmlhttprequest

Question

Tôi đang sử dụng HTML5 để tải tệp lên. Tôi có một sự kiện bấm nút gắn liền với hàm uploadFile(). Nó hoạt động tốt. Tôi cũng có một nút riêng để hủy tải lên. Tôi biết chúng ta cần gọi xhr.abort(); Nhưng làm cách nào để truy cập đối tượng xhr trong hàm uploadCanceled? Tôi có thể làm cho đối tượng xhr toàn cầu nhưng đó không phải là cách thích hợp. Ai đó có thể hướng dẫn tôi ở đây không?

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

Cheers

Answer 1

addEventListener sẽ thiết lập ngữ cảnh (this) của uploadCanceled để xhr:

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

Ví dụ: http://jsfiddle.net/wJt8A/

---

Nếu, thay vào đó, bạn cần phải kích hoạt xhr.abort thông qua nhấp chuột "Hủy", bạn có thể trả lại tham chiếu và thêm bất kỳ người nghe nào bạn cần sau đó:

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

Ví dụ: http://jsfiddle.net/rC63r/1/

Answer 2

Bạn sẽ có thể tham khảo các "này" từ khóa trong xử lý sự kiện canceledUpload của bạn. Điều đó đề cập đến XMLHttpRequest. Đặt này trong xử lý:

this.abort(); 

Answer 3

Abort tất cả 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();