javascript - 类型错误 : Cannot read property 'open' of undefined File Upload Spring MVC JQuery AJAX

Question

我正在尝试将文件从客户端上传到服务器。在此过程中使用 SpringMVC 和 JQuery。文件上传过程由运行 Javascript 函数的按钮点击触发。我总是得到 "TypeError: Cannot read property 'open' of undefined"来自 Javascript。

HTTP 请求在客户端(浏览器)停止。

<input id="fileUploadButton" type="button" onclick="fileUploadFunction()" value="Upload">

Javascript 函数

function fileUploadFunction() {



    if(!$('#fileupload').val()){
        console.log('No File Selected');
        $('#fileUploadStatus').val('File Required');
        return;
    }

    var uploadedFile = $('#fileupload')[0].files[0];

    var uploadFileFormData = new FormData();
    uploadFileFormData.append('uploadedFile', uploadedFile);

    $.ajax({

        url : 'fileUpload',
        type : 'POST',
        //dataType : 'text',
        //dataType : 'multipart/form-data',
        //enctype : 'multipart/form-data',
        processData : false,
        contentType : false,
        mimeType: 'multipart/form-data',
        data : uploadFileFormData,
        /* data : {
            uploadedFile : $('#fileupload')[0].files[0]
        }, */
        beforeSend : function() {
            $('#fileUploadStatus').val('');
        },
        success : function(reply) {
            console.log(reply);
        },
        error : function(xhr) {
            console.log(xhr);
        },
        complete : function(reply) {
            $('#fileUploadStatus').val(reply);
        },
        xhr : function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    percentComplete = Math.round(percentComplete);
                    console.log(percentComplete);
                }
            }, false);
        }

    });

}

Spring MVC Controller

@RequestMapping(value = "fileUpload", method = RequestMethod.POST)
public @ResponseBody String fileUpload(ModelMap model, HttpServletRequest request,
        @RequestParam(name = "uploadedFile") MultipartFile uploadedFile) {

当我在浏览器中调试时，我可以看到 uploadFileFormData不附加。

new FormData();也不处理纯文本。

JQuery : jquery-3.1.1.min.js .

这在我使用 var xhr = new XMLHttpRequest; 时有效但我需要使用类似 BeforeSend 的场景来处理 Ajax 请求, Success , error , Complete ...

var xhr = new XMLHttpRequest;
xhr.open('POST', 'fileUpload', true);
xhr.send(uploadFileFormData);

这里还有，uploadFileFormData是空的。

Answer 1

在函数末尾添加一个返回。如果不这样做，则请求尝试使用的 xhr 对象将是未定义的。那应该是你错误的根源。请参阅下面的代码。

     xhr : function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = (evt.loaded / evt.total) * 100;
                percentComplete = Math.round(percentComplete);
                console.log(percentComplete);
            }
        }, false);
        return xhr;//add this line. doing so fixed it for me.
    }