chrome 中未捕获多个文件上传的 TypeError 错误

Question

在其中一个页面上，我允许用户上传多张图片。脚本在 Firefox 中工作正常，但有时在 chrome 上不起作用，因为它给出以下错误

Uncaught TypeError: Cannot read properties of undefined (reading 'response')
at uploadComplete (UploadMultipleAlbumImages.js:79:52)

这个js文件的完整代码

var xhr, formData;
var url = baseURL + "admin/albums/UploadImageCropAuto";
var currentLoaderRef, currentTickerRef, fileCount = 0, uploadedFiles = 0, failedFiles = 0, files;
var fileGuids = [], fileNames = [];

$(document).ready(function () {

    $("input[type='file']").change(function () {
        if (parseInt(this.files.length) > 10) {
            alert("Please select maximum of 10 files.");
        }
        else {
            $('span[id*="Validation"]').html('');
            clearFileUploadFields();
            files = this.files;
            fileCount = 0;
            for (i = 0; i < files.length; i++) {
                uploadFile(files[i], url, files[i].name);
            }
            showProgress(this);
            console.log($("#FileGuid").val());
        }
    });
});

function showProgress(fileInput) {
    $("#submit").prop("disabled", true);
    currentLoaderRef = $(fileInput).parent().next().children("div.loader");
    currentTickerRef = $(fileInput).parent().next().children("div.checkmark-cover");
    currentLoaderRef.show();
    //$("progress").show();
}

function checkIfFileIsImage(fileType) {
    if (fileType.indexOf("image") == -1) {
        return true;
    }
    return false;
}

function uploadFile(file, url, originalFileName) {
    xhr = new XMLHttpRequest();
    formData = new FormData();
    xhr.open("POST", url, true);

    //Binding events to the request object
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete.bind(null, originalFileName), false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);

    xhr.onreadystatechange = getResponseFromServer(xhr);
    formData.append("albumImage", file);
    xhr.send(formData);
}


//Progress event
function uploadProgress(event) {
    if (event.lengthComputable) {
        //$(".percents").html(" " + ((event.loaded / event.total) * 100).toFixed() + "%");
        $("progress").val(((event.loaded / event.total) * 100));
    }
    else {
        alert("Failed to compute file upload length");
    }
}


function getResponseFromServer(xhr) {
    if (xhr.readyState == 4 && xhr.status == 200) {

    }
};

//Request complete event
function uploadComplete(originalFileName, event) {
    var response = JSON.parse(event.originalTarget.response);
    fileCount++;
    switch (response.messageType) {
        case "success":
            uploadedFiles++;
            fileGuids.push(response.fileName);
            fileNames.push(originalFileName);
            updateUploadedFilesUl(originalFileName, '', true);
            $("#albumImageFileName").val($("#albumImageFileName").val() + originalFileName + ", ");
            if (fileCount == files.length) {
                $("#submit").prop("disabled", false);
                currentLoaderRef.hide();
                currentTickerRef.addClass("opacity0");
                //$("progress").hide();
                $("#FileGuid").val(fileGuids.join('|'));
                $("#FileName").val(fileNames.join('|'));
            }
            break;
        case "largeFile":
            if (fileCount == files.length) {
                $("#submit").prop("disabled", false);
                currentLoaderRef.hide();
            }
            updateUploadedFilesUl(originalFileName, response.message, false);
            break;
        case "wrongFileType":
            if (fileCount == files.length) {
                $("#submit").prop("disabled", false);
                currentLoaderRef.hide();
            }
            updateUploadedFilesUl(originalFileName, response.message, false);
            break;
        case "exception":
            failedFiles++;
            if (fileCount == files.length) {
                $("#submit").prop("disabled", false);
                currentLoaderRef.hide();
                //if (failedFiles == 0)
                //    currentTickerRef.addClass("opacity0");
            }
            updateUploadedFilesUl(originalFileName, response.message, false);
            break;
    }
}

function clearFileUploadFields() {

    $("#albumImageFileName").val('');
    $("#uploadedFilesUL").html('');

    $("#FileGuid").val('');
    $("#FileName").val('');

    fileCount = 0;
    uploadedFiles = 0;
    failedFiles = 0;

    fileGuids = [];
    fileNames = [];
}

function updateUploadedFilesUl(originalFileName, message, isFileUploaded) {
    if (isFileUploaded) {
        $("#uploadedFilesUL").append("<li class='success'>" + originalFileName + "</li>")
    }
    else {
        $("#uploadedFilesUL").append("<li class='failure'>" + originalFileName + " <b>upload failed, error: " + message + "</b></li>")
    }
}

//Request error event
function uploadFailed(event) {
    hideAllLoadersAndCheckMarks();
    $("#submit").prop("disabled", false);
    $("#message").html('A problem occured while uploading the image.');
    //$("progress").hide();
}

//Request cancel upload event
function uploadCanceled(event) {
}

function hideAllLoadersAndCheckMarks() {
    $('.loader').hide();
    $('.checkmark-cover').removeClass("opacity0");
}


  

Answer 1

问题已通过将

event.originalTarget.response

替换为

event.target.response

得到解决，因为

event.originalTarget

仅在 FireFox 浏览器上受支持。

//only works in FF event.originalTarget.response
//var response = JSON.parse(event.originalTarget.response);
 var response = JSON.parse(event.target.response);

感谢用户@Jaromanda，他在评论中指出了这一点。