ファイル+データを送信するFormData

Question

フォームデータとファイルをRESTエンドポイントにアップロードしようとしています。私は、次のコードを書かれている -

$(document).ready(function() { 

    var data = new FormData(); 

    //upload file append to formdata 
    $("#catItemData #uploadC").on('change', function(){ 
      $this = $(this); 
      var file = $this[0].files[0]; 
      data.append("xlsx",file);    

//input fields append to formdata 
    $("#catItemData #catSubmit").click(function(){ 
     var formD = { 
       name: $("#name").val(), 
       type: $("#type").val() 
     }; 
     for (var key in formD) { 
      data.append(key, formD[key]); 
     }  
     $.ajax({    
       type: "POST", 
       url: "http://localhost:8086/service/create",   
       data: data, 
       contentType: false, 
       cache: false, 
       processData: false, 
       success: function(response, status, xhr) { 
         //response 
        } 
       }); 
     }); 
    }); 

これは、しかし、任意のファイルのコンテンツをアップロードしてくれ415のサポートされていないメディアタイプのエラーを与えていません。これは、ペイロードの様子です。 -

------ WebKitFormBoundaryANhANgazbC1YNo1u 内容 - 配置：フォームデータ。名前= "xlsx";ファイル名= "testfile.xlsx" のContent-Type：アプリケーション/ vnd.openxmlformats-officedocument.spreadsheetml.sheet

------ WebKitFormBoundaryANhANgazbC1YNo1u コンテンツディスポジション：フォームデータ;名前= "名前"

ハロー

------ WebKitFormBoundaryANhANgazbC1YNo1u コンテンツディスポジション：フォームデータ;私はおそらくここで何を名= "タイプ"

PLATFORM

を逃していますか？どんな助けも高く評価されます。

Answer 1

dataの方法で変数を宣言する必要があります。イベントはファイルの入力時に変更する必要があります。クリック機能の下では、var formDの必要はありません。単にあなたのコードはこのようにすべきです。

$(document).ready(function() { 



    $("#catItemData #catSubmit").click(function(){ 
     var data = new FormData(); 
     data.append('name', $("#name").val()); 
     data.append('type', $("#type").val()); 
     data.append("xlsx",$('#uploadC')[0].files[0]); 
     $.ajax({    
       type: "POST", 
       url: "http://localhost:8086/service/create",   
       data: data, 
       contentType: false, 
       cache: false, 
       processData: false, 
       success: function(response, status, xhr) { 
         //response 
        } 
       }); 
     }); 
    });