[英]How to cancel XMLHttpRequest file upload on button click
我有一個使用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();
});
謝謝
XMLHttpRequest對象具有Abort()
方法。 使用xhr.abort();
通過按鈕的單擊事件並檢查結果。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.