FormData для отправки файла + данных

Я пытаюсь загрузить некоторые данные формы и файл в конечную точку 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; name = "xlsx"; filename = "testfile.xlsx" Content-Type: application / vnd.openxmlformats-officedocument.spreadsheetml.sheet

------ WebKitFormBoundaryANhANgazbC1YNo1u Content-Disposition: form-data; name = "имя"

Привет

------ WebKitFormBoundaryANhANgazbC1YNo1u Content-Disposition: form-data; name = "тип"

ПЛАТФОРМА

Что я, возможно, здесь упускаю? Любая помощь высоко ценится.


multipartform-data jquery ajax form-data asyncfileupload
person rnaikzz    schedule 15.09.2016    source источник
comment
Конечная точка REST не распознает этот формат файла.   -  person Barmar    schedule 16.09.2016
comment
Почему бы не использовать форму JQuery?   -  person Ali Sheikhpour    schedule 16.09.2016
comment
Я протестировал бэкэнд с помощью командной строки, и он быстро загрузил файл Excel без каких-либо проблем. Нужно ли мне изменить здесь тип содержимого для файла, чтобы он мог пройти? Бэкэнд оборудован для обработки содержимого multipart / form-data и application / octet-stream.   -  person rnaikzz    schedule 16.09.2016
comment
Я попробую сейчас @Ali Sheikhpour.   -  person rnaikzz    schedule 16.09.2016
comment
Я получаю ту же ошибку 415 даже после использования формы JQuery. Я сейчас не в курсе.   -  person rnaikzz    schedule 16.09.2016
comment
Проверьте вкладку «Сеть» в инструментах разработчика и сравните, что отправляется при обычной загрузке файла и при использовании кода AJAX.   -  person Barmar    schedule 16.09.2016

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны объявить переменную 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
                    }
              });   
      });
  });
person Haresh Vidja    schedule 16.09.2016
comment
Спасибо, это сработало. Также мне пришлось добавить class = input-file в мой ввод файла для данных обрабатываемого файла. - person rnaikzz; 16.09.2016