FormData发送文件+数据

时间:2016-09-15 21:03:06

标签: jquery ajax multipartform-data form-data asyncfileupload

我正在尝试将一些表单数据和文件上传到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 内容处理:表格数据; NAME = “XLSX”;文件名= “testfile.xlsx” Content-Type:application / vnd.openxmlformats-officedocument.spreadsheetml.sheet

------ WebKitFormBoundaryANhANgazbC1YNo1u 内容处理:表格数据;名称= “名称”

您好

------ WebKitFormBoundaryANhANgazbC1YNo1u 内容处理:表格数据;名称= “类型”

PLATFORM

我可能错过了什么?任何帮助都非常感谢。

1 个答案:

答案 0 :(得分:2)

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