Ajax 方法在单击按钮时工作两次

Question

文件上传功能作用于上传按钮点击。功能

$("#fuPDFAdd").change(function () {})

单击“btnUploadAdd”按钮时，文件上传更改正在工作两次。 如何避免这种情况

<div id="divUploadFileAdd">
    <form enctype="multipart/form-data" id="frmUplaodFileAdd">
        @Html.AntiForgeryToken()
        <input id="fuPDFAdd" name="file" type="file" style = "display:none;"/> 
        <button class="" id="btnUploadAdd" type="button" onclick="test()">Upload</button>
        <label id="txtuploadedMsgAdd"> </label>
    </form>
</div>

$(document).ready(function () {
    $("#fuPDFAdd").change(function () {
        console.log("tst1");
        var file = this.files[0];
        fileName = file.name;
        size = file.size;
        type = file.type;
        if (type.toLowerCase() == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") { //I just want pdf files and only want to show
            var formData = new FormData($('#frmUplaodFileAdd')[0]);
            $.ajax({
                url: "UploadFile",  //Server script to process data
                type: 'POST',
                async: false,
                xhr: function () {  // Custom XMLHttpRequest
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) { // Check if upload property exists
                        myXhr.upload.addEventListener('progress',
                        progressHandlingFunction, false); // For handling the progress of the upload
                    }
                    return myXhr;
                },
                data: formData,
                //Options to tell jQuery not to process data or worry about content-type.
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    grdStaffAddition.PerformCallback({ transStatus: "New" });
                    ShowClientToastr('False', 'False', 'toast-bottom-right', 'True', 'success', 'Template migration completed' + data.result, 'CAM - Contract Staff');
                }
            });
        }
        else {
            ShowClientToastr('False', 'False', 'toast-bottom-right', 'True', 'error', 'Please select xls/xlsx file.', 'CAM - Contract Staff');
        }
    });
});

function test() {   
    $("#fuPDFAdd").click();
}

Answer 1

这样的事情会起作用，我确实将文件上传代码包装到一个单独的函数中，并让它从你的事件侦听器调用这个新函数。

function uploadTheFile() {
    console.log("tst1");
    var file = this.files[0];
    fileName = file.name;
    size = file.size;
    type = file.type;
    if (type.toLowerCase() == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") { //I just want pdf files and only want to show
        var formData = new FormData($('#frmUplaodFileAdd')[0]);
        $.ajax({
            url: "UploadFile", //Server script to process data
            type: 'POST',
            async: false,
            xhr: function() { // Custom XMLHttpRequest
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) { // Check if upload property exists
                    myXhr.upload.addEventListener('progress',
                        progressHandlingFunction, false); // For handling the progress of the upload
                }
                return myXhr;
            },
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                grdStaffAddition.PerformCallback({
                    transStatus: "New"
                });
                ShowClientToastr('False', 'False', 'toast-bottom-right', 'True', 'success', 'Template migration completed' + data.result, 'CAM - Contract Staff');

            }
        });
    } else {
        ShowClientToastr('False', 'False', 'toast-bottom-right', 'True', 'error', 'Please select xls/xlsx file.', 'CAM - Contract Staff');

    }
}
$("#fuPDFAdd").change(function() {
    uploadTheFile();
});

function test() {
    uploadTheFile();
}