Почему FormData пустой?

Question

[merelyJunior]

Задача: отправка текстовых файлов/изображений.
Проблема: объект FormData пустой.
Текущий код для файла примерно такой (было много вариантов, во всех FormData пустой):

// выбираем инпут через который загружаем файл и сам файл
var files;
$("#fileBio").on("change", function () {
  files = this.files;
});
$("#addAbout").on("click", function (e) {
  e.preventDefault(); 
  // создадим объект данных формы
  var data = new FormData();
  // заполняем объект данных файлами в подходящем для отправки формате
  $.each(files, function (key, value) {
    data.append(key, value);
  });
  data.append("fileText", 1);
  // AJAX запрос
  $.ajax({
    url: "",
    type: "POST",
    data: data,
    cache: false,
    dataType: "json",
    success: function () {
    },
  });
})

Comments

[Денис Инешин]

1) Ну сделайте демку онлайн
2) Дебажте начиная с 3 строки

Answer 1

[ThunderCat]

1) Как верно заметил TheAndrey7 в комментариях, слушать надо субмит формы (например, отправить форму я могу нажав ентер в любом текстовом инпуте), это хорошая практика, вешать слушатель на кнопку - плохая идея. И форму можно получить сразу через new FormData(this), что не требует мутных манипуляций с отдельными элементами.
2) так же не хватает настроек аякса,

processData: false,
contentType: false,

во всех FormData пустой

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

Comments

[merelyJunior]

Во первых спасибо за советы по оформлению вам и TheAndrey7!
Это очень по делу, воспользовался. запомнил буду знать)
Во вторых, да проверял через консоль
Заглянул во вкладку payload там мой аякс со следующим:
fileText: (binary)
я верно понял что значит все отрабатывает как нужно?

[ThunderCat]

merelyJunior, да, это значит идет отправка бинарных данных, а не текстовых полей, которые были бы видны как кей:валуе пары, что собственно несложно проверить на бэкенде, задампив инпут.

[merelyJunior]

ThunderCat, спасибо за помощь