点击按钮如何取消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(); 通过按钮的单击事件并检查结果。