javascriptでファイルをアップロードし、api経由でファイルを送信

Question

私はファイルをアップロードし、api経由でファイルとして送信しようとしています。しかし、動作しません。ここで私のアップロードに使用され、私のファイルをAPIに送信します。 しかし、ほとんどの場合、エラーメッセージが表示されます。

$(document).on('change', '#txtUploadFile', function(e){ 

    var files = e.target.files; 
    if (files.length > 0) { 
     if (this.value.lastIndexOf('.xlsx') === -1){ 
      alert('Only ods files are allowed!'); 
      this.value = ''; 
      return; 
     } 
     if (window.FormData !== undefined) { 
      var data = new FormData(); 
      for (var x = 0; x < files.length; x++){ 
       data.append("file" + x, files[x]); 
      } 

      $.ajax({ 
       type: "POST", 
       contentType: "multipart/form-data", 
       url: 'http://localhost/clicportaltest/rest/clicadmin/uploadExcel', 

       data:{file:file}, 
       success: function(result) { 
        console.log(result); 
       }, 
       error: function (xhr, status, p3, p4){ 
        var err = "Error " + " " + status + " " + p3 + " " + p4; 
        if (xhr.responseText && xhr.responseText[0] == "{") 
         err = JSON.parse(xhr.responseText).Message; 
         console.log(err); 
        } 
       }); 
     } else { 
      alert("This browser doesn't support HTML5 file uploads!"); 
      } 
    } 
}); 

Answer 1

$(function(){ 
$('#submitUpload').on('click', function(){ 
    var file = document.getElementById("upload").files[0]; 
    var form = new FormData(); 
    form.append("file", file); 

    var settings = { 
     "async": true, 
     "crossDomain": true, 
     "url": "http://localhost/clicportaltest/rest/clicadmin/uploadExcel", 
     "method": "POST", 
     "processData": false, 
     "contentType": false, 
     "mimeType": "multipart/form-data", 
     "data": form 
    }; 

    $.ajax(settings).done(function (response) { 
     console.log(response); 
    }); 
    }); 
}); 

Answer 2

あなたがいないJSON.stringifydataFormDataのでtoJSON()方法を持っていないことができ、それは"{}"になりプレーンなオブジェクトとして扱われます。

独自のFormData.prototype.toJSONメソッドを実装することも、dataをハンドラの文字列またはプレーンオブジェクトに変換することもできます。 dataの文字列表現がどのようにフォーマットされるべきかは、APIが期待する方法に完全に依存します。