Загрузка нескольких файлов в Web Api с помощью jQuery Ajax

Question

У меня проблема с загрузкой файлов с помощью jQuery Ajax и веб-API. Когда я делаю POST для своего API, я не загружаю файлы в свой контроллер.

В моем HTML У меня есть несколько входов файлов с классом = "файл", как это:

<form id="edit" enctype="multipart/form-data"> 
    <input class="file" type="file" name="field_custom_file" accept='image/*' /> 
    <input class="file" type="file" name="field_custom_file" accept='image/*' /> 
    <input class="file" type="file" name="field_custom_file" accept='image/*' /> 
</form> 

В addittion, у меня есть кнопка, которая выполняет функцию JavaScript:

function send() { 
    var files = $('.file')[0].files; 
    if (files.length > 0) { 
     if (window.FormData !== undefined) { 
      var data = new FormData(); 
      for (var x = 0; x < files.length; x++) { 
       data.append("file" + x, files[x]); 
      } 

      $.ajax({ 
       type: "POST", 
       url: '/api/tripgroups', 
       contentType: false, 
       processData: false, 
       data: data, 
       success: function (result) { 
        toastr.success('Trip Group was updated!'); 
       }, 
       error: function (xhr, status, p3, p4) { 
        var err = "Error " + " " + status + " " + p3 + " " + p4; 
        if (xhr.responseText && xhr.responseText[0] == "{") 
         err = JSON.parse(xhr.responseText).Message; 
        console.log(err); 
       }, 
       enctype: 'multipart/form-data', 
       headers: { 
          'Accept': 'application/json', 
          'Content-Type': 'application/json' 
         }, 
      }); 
     } else { 
      alert("This browser doesn't support HTML5 file uploads!"); 
     } 
    } 
} 

Наконец, в моем веб-контроллере api, если я попытаюсь получить доступ к файлам HttpContext.Current.Request.Files, я получаю пустую коллекцию, и если я попытаюсь получить доступ к контенту вроде этого:

var streamProvider = new MultipartFormDataStreamProvider("images"); 
await Request.Content.ReadAsMultipartAsync(streamProvider); 

Тогда я получаю эту ошибку:

Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content

Спасибо заранее.

Answer 1

Вы используете API, поэтому ваш запрос HttpResponseMessage.

Если вы не спешите, я предлагаю поглотить эту статью. http://www.asp.net/web-api/overview/advanced/sending-html-form-data-part-2

Если вы действительно в крайнем сроке, я бы предложил разместить 1 файл за раз и объяснить ограничения загрузки нескольких файлов одновременно. В противном случае используйте сторонний API, чтобы учиться и реконструировать его для себя.

Answer 2

Я, наконец, понял.

Я изменил свой Ajax вызов, как @ guest271314 предлагает приобрести все файловые входы:

var files = $('.file'); 
if (files.length > 0) { 
    if (window.FormData !== undefined) { 
     var data = new FormData(); 
     for (var x = 0; x < files.length; x++) { 
      data.append("file" + x, files[x].files[0]); 
     } 
     $.ajax({ 
      type: "POST", 
      url: '/api/tripgroups', 
      contentType: false, 
      processData: false, 
      data: data, 
      success: function (result) { 
       toastr.success('Trip Group was updated!'); 
      } 
     }); 
    } else { 
     alert("This browser doesn't support HTML5 file uploads!"); 
    } 
} 

И главный вопрос был на моем контроллере, потому что у меня был еще один параметр

public async Task<HttpResponseMessage> Post(SomeClass param) 

, когда я удалил этот параметр правильно принимает файлы.

Я до сих пор не знаю, как получить объект JSON и файлы в одном запросе (если это возможно), но я разделился на 2 разных контроллера и хорошо работает.

Спасибо всем за вашу помощь!