Отправка данных и файлов через многокомпонентные формы с FormData в HTML с использованием ajax

Question

В приведенном ниже коде я могу передавать данные, но когда я использую функцию добавления для передачи файла и данных, это не работает. Может кто-нибудь сказать мне, как перенести файл с загрузки? С нетерпением ждем помощи

$(document).ready(function() {
  var loader = '<img src="../assets/media/loader.gif" />';

  $('#submit').click(function() {
    confirm("Do you really want to send messages?");
    $('.loading').html(loader).fadeIn();

    var msg_area_cst = $('textarea[name=msg_area_cst]').val();
    var num_cst = $('textarea[name=num_cst]').val();

    var form_data = new FormData();
    form_data = 'msg_area_cst=' + msg_area_cst + '&num_cst=' + num_cst;
    form_data.append('upload', $('input[name=upload]'));

    $.ajax({
      url: "../server/CustomMsg.php",
      type: "POST",
      data: form_data,
      success: function(html) {
        if (html == 1) {
          $('#register_form').fadeOut('slow');
          $('.loading').fadeOut();
          $('.message').html('Successfully Sent ! ').fadeIn('slow');
        } else 
          alert('Sorry, unexpected error. Please try again later.');
      }
    });
  });
});

Answer 1

Попробуйте это ajax код

  $.ajax({
     url: "../server/CustomMsg.php",
     type: "POST",
    data: form_data,
    contentType: false,
        cache: false,
        processData:false,
         async: true,
  success: function(html) {
    if (html == 1) {
      $('#register_form').fadeOut('slow');
      $('.loading').fadeOut();
      $('.message').html('Successfully Sent ! ').fadeIn('slow');
    } else 
      alert('Sorry, unexpected error. Please try again later.');
  }
});

Answer 2

Проблема в том, что вы правильно объявляете объект FormData, но затем в следующей строке перезаписываете его сразу строкой.

Вам необходимо append() все данных для объекта FormData. Кроме того, вам необходимо предоставить данные файла для метода append(), а не для объекта jQuery, ссылающегося на элемент управления input type="file".

var form_data = new FormData();
form_data.append('msg_area_cst', msg_area_cst);
form_data.append('num_cst', num_cst);
form_data.append('upload', $('input[name=upload]')[0].files[0]);

При этом вы можете сделать это намного проще, если элементы управления, из которых вы читаете значения, содержатся в элементе form. Затем вы можете использовать событие submit этой формы и передать ссылку на него конструктору FormData.

Также вы ничего не делаете с результатом confirm() Я предполагаю, что вы хотите остановить отправку формы, если нажата Cancel, что в приведенном выше примере теперь использует preventDefault().

Наконец, использование html == 1 очень ненадежно. Во-первых, html будет строкой, поэтому использование неявного приведения типа к целому числу не является идеальным. Кроме того, возврат простого текстового ответа может вызвать проблемы, если есть какие-либо пробелы. Я настоятельно рекомендую вам изменить серверную логику c, чтобы она возвращала сериализованный формат, например JSON, и использовать логическое значение для флага «успеха».

С учетом всего сказанного попробуйте это:

$('#yourForm').on('submit', function(e) {
  if (!confirm("Do you really want to send messages?")) {
    e.preventDefault();
  }
  
  $('.loading').html(loader).fadeIn();

  $.ajax({
    url: "../server/CustomMsg.php",
    type: "POST",
    data: new FormData(this),
    success: function(html) {
      if (html.trim() === "1") {
        $('#register_form').fadeOut('slow');
        $('.loading').fadeOut();
        $('.message').html('Successfully Sent ! ').fadeIn('slow');
      } else
        alert('Sorry, unexpected error. Please try again later.');
      }
    }
  });
});