Как загрузить более одного файла с данными формы?

Question

Как я могу использовать более одного загрузчика файлов вместе с текстовыми полями? Когда я удаляю загрузчик файлов, он работает. Как я могу добавить свои файлы?

<form id="uploader" enctype="multipart/form-data">
  <input type="file" id="fileInput" /><br /> This is Single File
  <input type="file" id="fileInput1" multiple /><br /> Multipul File
  <b>Eneter Id </b> <input type="text" id="Id" /><br />
  <b>Name</b> <input type="text" id="Name" /><br />
  <input type="button" id="fileButton" value="Upload Files" /><br />
</form>

$(document).ready(function() {
  var apiBaseUrl = "http://localhost:50895/CsgFiles/";

  $("#fileButton").click(function(e) {
    debugger

    var fileform = document.getElementById('fileInput');
    var files = fileform.files;
    var fileform1 = document.getElementById('fileInput1');
    var files1 = fileform1.files;
    var abc = {
      Id: $("#Id").val().trim(),
      Name: $("#Name").val().trim(),
      File2: files,
      File1: files1,
    }

    var data = new FormData(); //From Here Please Help me How can i use
    data.append('File2', files)

    $.ajax({
      url: apiBaseUrl + 'saveFiles',
      type: 'POST',
      dataType: 'json',
      data: data,
      cache: false,
      processData: false,
    }).done(function(data) {
      debugger
    }).fail(function(e) {
      debugger;
    });
  })
})

Answer 1

Когда вы загружаете все содержимое из элементов управления form, самый простой способ построить объект FormData - предоставить ссылку form на конструктор, а затем все append() logi c сделано для вас.

Также обратите внимание, что при работе с формами вы должны подключаться к событию submit самой формы, а не к нажатию кнопки отправки.

Наконец, вам нужно включить contentType: false и в вызов $.ajax, чтобы jQuery установил правильные заголовки.

После всего сказанного попробуйте следующее:

jQuery($ => {
  var apiBaseUrl = "http://localhost:50895/CsgFiles/";

  $("#uploader").on('submit', function(e) {
    e.preventDefault();
    var data = new FormData(this);

    $.ajax({
      url: apiBaseUrl + 'saveFiles',
      type: 'POST',
      dataType: 'json',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
    }).done(function(data) {
      debugger;
      console.log(data);
    }).fail(function(e) {
      debugger;
    });
  });
});

Я бы также предложил использовать относительный путь для вызова, например: var apiBaseUrl = "/CsgFiles/";. Таким образом, код будет работать при перемещении между локальными / dev / live средами. Это также исключает возможность любых междоменных аварий с использованием разных протоколов.