如何取消按鈕上的XMLHttpRequest文件上傳點擊

Question

我有一個使用XMLHttpRequest對象上傳圖片文件的jQuery函數。表單頁面使用六個輸入文件，用戶可以爲每個輸入文件選擇一個圖像文件。在任何輸入文件中選擇某個文件後，jQuery函數將觸發並啓動文件上傳。

我想實現取消按鈕，以便在每個按鈕上單擊XMLHttpRequest進程停止/中止相應的圖像文件上傳。我怎樣才能實現這個？

感謝

完整的代碼是在這裏：

$(document).ready(function() { 

$.fn.uploadImage = function() { 

    this.change(function (evt) { 

     var whichInputFile = evt.target.id 
     var whichProgressBar 
     var whichProgressLabel 
     var whichImage 
     var whichAlert 
     var whichCancelButton 

     switch (whichInputFile) { 
      case "file_Q1": 
       whichProgressBar = "#prbar1" 
       whichProgressLabel = "#progresslabel1" 
       whichImage = "#image_Q1" 
       whichAlert = "#alert_Q1" 
       whichCancelButton = "#CancelButtonA" 
       break; 
      case "file_Q2": 
       whichProgressBar = "#prbar2" 
       whichProgressLabel = "#progresslabel2" 
       whichImage = "#image_Q2" 
       whichAlert = "#alert_Q2" 
       whichCancelButton = "#CancelButtonA" 
       break; 
      case "file_Q3": 
       whichProgressBar = "#prbar3" 
       whichProgressLabel = "#progresslabel3" 
       whichImage = "#image_Q3" 
       whichAlert = "#alert_Q3" 
       whichCancelButton = "#CancelButtonB" 
       break; 
      case "file_Q4": 
       whichProgressBar = "#prbar4" 
       whichProgressLabel = "#progresslabel4" 
       whichImage = "#image_Q4" 
       whichAlert = "#alert_Q4" 
       whichCancelButton = "#CancelButtonB" 
       break; 
      case "file_Q5": 
       whichProgressBar = "#prbar5" 
       whichProgressLabel = "#progresslabel5" 
       whichImage = "#image_Q5" 
       whichAlert = "#alert_Q5" 
       whichCancelButton = "#CancelButtonC" 
       break; 
      case "file_Q6": 
       whichProgressBar = "#prbar6" 
       whichProgressLabel = "#progresslabel6" 
       whichImage = "#image_Q6" 
       whichAlert = "#alert_Q6" 
       whichCancelButton = "#CancelButtonC" 
       break; 

      default: 
     } 


     var xhr = new XMLHttpRequest(); 
     var data = new FormData(); 
     var files = $(evt.target).get(0).files; 

     for (var i = 0; i < files.length; i++) { 
      data.append(files[i].name, files[i]); 
     } 

     xhr.upload.addEventListener("progress", function (evt) { 
      if (evt.lengthComputable) { 
       var progress = Math.round(evt.loaded * 100/evt.total); 
       $(whichProgressBar).progressbar("value", progress); 
      } 
     }, false); 


     var url = "http://serverName/mySite/uploadImagesHandler.ashx" 
     xhr.open("POST", url); 
     data.append("Sel", whichInputFile); 
     xhr.send(data); 


     $(whichProgressBar).progressbar({ 
      max: 100, 
      change: function (evt, ui) { 
       $(whichProgressLabel).text($(whichProgressBar).progressbar("value") + "%"); 
      }, 
      complete: function (evt, ui) { 
       $(whichProgressLabel).text("Image uploaded successfully!"); 
      } 
     }); 


     xhr.onreadystatechange = function() { 

      if (xhr.readyState == 4) { //Property readyState == 4 (request finished and response is ready). 

       if (xhr.responseText == "0") { 
        xhr.abort 
        $(whichProgressBar).progressbar({ value: 0 }) 
        $(whichProgressLabel).text("Error. Check messages."); 
        $(whichAlert).text("User's Session expired."); 

       } else { 
        if (xhr.responseText == "1") { 
         xhr.abort 
         $(whichProgressBar).progressbar({ value: 0 }) 
         $(whichProgressLabel).text("Error. Check messages."); 
         $(whichAlert).text("Product Image: The image format is invalid, must be JPG or JPEG."); 

        } else { 
         if (xhr.responseText == "2") { 
          xhr.abort 
          $(whichProgressBar).progressbar({ value: 0 }) 
          $(whichProgressLabel).text("Error. Check messages."); 
          $(whichAlert).text("Product Image: The image size is too large, should be 15 MB maximum."); 
         } else { 

          if (xhr.status == 200) { //Property status == 200 ("OK"). 
           $(whichProgressLabel).text("Image uploaded successfully."); 
           $(whichImage).attr("src", xhr.responseText); 
           $(whichAlert).text(""); 

          } else { 
           $(whichProgressLabel).text("An error occurred."); 
           $(whichAlert).text(""); 
          } 

         } 
        } 
       } 


      } 


     } 


     evt.preventDefault(); 
    }); 

} 

$("#file_Q1, #file_Q2, #file_Q3, #file_Q4, #file_Q5, #file_Q6").uploadImage(); 

}）;

感謝

Answer 1

XMLHttpRequest對象具有Abort()方法。通過按鈕的單擊事件使用xhr.abort();並檢查結果。