I have a jQuery function that is uploading image files using XMLHttpRequest Object. The form page uses six input files, and the user can select one image file for each input file. After some file is selected in any input file, the jQuery function triggers and starts the file upload.
I am trying to implement cancel buttons so that on each button click the XMLHttpRequest process stop/abort the corresponding image file upload. How can I implement this?
Thanks
The complete code is here:
$(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();
});
thanks
