FormData发送文件+数据

Question

I am trying to upload some form data and a file to REST endpoint. I have written the following code -

$(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
                    }
              });   
      });
  }); 

This however does not upload any file content and gives me a 415 unsupported media type error. This is how the payload looks like -

------WebKitFormBoundaryANhANgazbC1YNo1u Content-Disposition: form-data; name="xlsx"; filename="testfile.xlsx" Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

------WebKitFormBoundaryANhANgazbC1YNo1u Content-Disposition: form-data; name="name"

hello

------WebKitFormBoundaryANhANgazbC1YNo1u Content-Disposition: form-data; name="type"

PLATFORM

What am I possibly missing out here ? Any help is highly appreciated.

Answer 1

You have to declare data variable under method, No need of change event on file input if no any validation on change of that file. No need of var formD under click function. Simply your code should be like this.

$(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
                    }
              });   
      });
  });