Отправить данные формы в функцию загрузки файла?

Question

У меня есть рабочий файл загрузки с индикатором выполнения, и файл загружен в fileUpload.php.

  function fileSelected() {
    var file = document.getElementById('fileToUpload').files[0];
    if (file) {
      var fileSize = 0;
      if (file.size > 1024 * 1024)
        fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
      else
        fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

        document.getElementById('file-size').innerHTML = fileSize;
    }
  }

  function uploadFile() {
    var fd = new FormData();
    fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "src/fileUpload.php");
    xhr.send(fd);
  }

  function uploadProgress(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);

    //var loaded = 0;
      if (evt.loaded > 1024 * 1024)
        loaded = (Math.round(evt.loaded * 100 / (1024 * 1024)) / 100).toString() + 'MB';
      else
        loaded = (Math.round(evt.loaded * 100 / 1024) / 100).toString() + 'KB';

      document.getElementById('procent').innerHTML = percentComplete.toString() + '%';
      document.getElementById('progressNumber').style.width = percentComplete.toString() + '%';

      document.getElementById('loaded').innerHTML = loaded.toString();

    }
    else {
      document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
  }

HTML:

    <form id="order-form" class="needs-validation" method="post" enctype="multipart/form-data" novalidate>
   <!-- Lot of inpup forms -->
                  <div class="custom-file">
                     <input type="file" class="custom-file-input" id="fileToUpload" onchange="fileSelected();" name="fileToUpload" accept=".zip" required>
                     <span id="selected-file" class="custom-file-label" for="fileToUpload">Choose file</span>
                     <div class="invalid-feedback">
                        Please select a file.
                     </div>
                  </div> 
    <button id="send-button" class="btn btn-primary btn-lg btn-block" type="button" onclick="sendOrder()">Send order</button>

Но я также хочу отправить данные формы в файл sendOrder.php

Прямо сейчас у меня есть это

  function sendOrder() {
    $.ajax({
        type: 'post',
        url: 'src/sendOrder.php',
        data: $('form').serialize(),
        success: function () {

        }
    });
    uploadFile();
  }

Но я не могу изменить загрузку файла (первый блок кода), чтобы также отправлять данные формы sendOrder.php?

sendorder.php содержит переменные, подобные этой

$email = $_POST['email'];

И отправьте информацию по почте в sendOrder.php с переменными (это как контактная форма).

Answer 1

Для этого вы должны использовать один вызов ajax.

Измените тип кнопки отправки на type='submit' и удалите атрибут onclick()

$('#order-form').submit(function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
    type: 'post',
    url: 'src/sendOrder.php',
    data: formData,
    success: function (response) {
      console.log(response);
    }
});

})