FormData發送文件+數據

我試圖上傳一些表單數據和文件到REST端點。我寫了下面的代碼 -FormData發送文件+數據

$(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; NAME = 「XLSX」;文件名= 「testfile.xlsx」內容類型：應用/ vnd.openxmlformats-officedocument.spreadsheetml.sheet

------ WebKitFormBoundaryANhANgazbC1YNo1u 內容處置：形狀數據;名稱= 「名稱」

你好

------ WebKitFormBoundaryANhANgazbC1YNo1u 內容處置：形狀數據;名稱=「類型」

平臺

什麼我可能錯過了這裏？任何幫助，高度讚賞。

來源

2016-09-15 rnaikzz

REST端點無法識別該文件格式。 – Barmar

爲什麼不使用[Jquery窗體]（http://malsup.com/jquery/form/）？ –

我使用命令提示符測試了後端，並立即上傳了一個沒有任何麻煩的Excel文件。我是否需要修改文件的內容類型以便可以通過？後端可以處理多部分/表單數據和應用/八位字節流類型的內容。 – rnaikzz

您必須在方法下聲明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 
        } 
       }); 
     }); 
    });

來源

2016-09-16 07:20:00

工作感謝你。此外，我不得不在我的文件輸入中添加class =「input-file」，以處理要處理的文件的數據。 – rnaikzz

FormData發送文件+數據

回答

相關問題