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);
    }
});

})

通过文件上传功能提交表单数据吗？

1 个答案: