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 Content-Disposition : form-data; 이름 = "xlsx"; 파일 이름 = "testfile.xlsx" 콘텐츠 형식 : 응용 프로그램/vnd.openxmlformats-officedocument.spreadsheetml.sheet

------ WebKitFormBoundaryANhANgazbC1YNo1u 내용 - 처리 : 폼 데이터; 이름 = "이름"

헬로

------ WebKitFormBoundaryANhANgazbC1YNo1u 내용 - 처리 : 폼 데이터;

나는 아마도 무슨 이름 = "유형"

플랫폼을 놓친 거지? 어떤 도움을 주셔서 감사합니다.

Answer 1

data 변수를 선언해야합니다. 해당 파일의 변경에 대한 유효성 검사가 없으면 파일 입력시 change 이벤트가 필요하지 않습니다. 클릭 기능에서 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 
        } 
       }); 
     }); 
    });