TypeError：未定義のファイル 'open'を読み取ることができませんファイルアップロード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のコントローラ

@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、Success、error、Completeのようなシナリオを使用してAjaxリクエストを処理する必要がある場合

これはuploadFileFormDataが空である、また、ここでは...

var xhr = new XMLHttpRequest; 
xhr.open('POST', 'fileUpload', true); 
xhr.send(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. 
    }