如何在jQuery中通过Ajax上传两个不同的输入文件？

Question

我一直在处理一个表单，该表单先前包含两个输入文件，但它们不是多种类型。但是现在我希望它们具有多种类型。

对于HTML部分，我现在不使用表单，以前从未使用过，但是它正常工作。我所做的是：

var sample = '';
var fileupload = document.getElementById("fileup");

$('.upload-btn').on('click', function() {
  var sb_field = $(this).parent().find('input[name="sample[]"]');
  sb_field.click();
});

fileupload.onchange = function() {
  var total_files = fileupload.files.length
  for (i = 0; i < total_files; i++) {
    resume = $('#fileup')[0].files[i];
    var imageName = $('#fileup')[0].files[i].name;
    $('.sample').append(`<li><span class="remove-file remove-sample btn f-20 mr-2">X</span>&nbsp;<span>${imageName}</span></li>`);
  }
}

$(document).on('click', '.remove-sample', function() {
  $('.sample').html('');
  sample = '';
});

var resume = '';
var resumeUpload = document.getElementById("fileup2");

$('.upload-btn2').on('click', function() {
  var rm_field = $(this).parent().find('input[name="resume[]"]');
  rm_field.click();
});

resumeUpload.onchange = function() {
  var total_files = resumeUpload.files.length
  for (i = 0; i < total_files; i++) {
    resume = $('#fileup2')[0].files[i];
    var imageName = $('#fileup2')[0].files[i].name;
    $('.resume').append(`<li><span class="remove-file remove-resume btn f-20 mr-2">X</span>&nbsp;<span>${imageName}</span></li>`);
  }
}

$(document).on('click', '.remove-resume', function() {
  $('.resume').html('');
  resume = '';
});

$('.applyTeacher').on('click', function() {
  $('.guru_alert').html('');
  var $this = $(this);
  var current_fs = $this.parent();
  //check the fields
  var ip_chk = current_fs.find('.manual');
  var allFilled = true;

  if (ip_chk.length > 0) {
    $(ip_chk).parent().find('span.reminder').remove();
    $(ip_chk).each(function() {
      if ($(this).val().length == 0) {
        allFilled = false;
        $(this).parent().append('<span class="reminder">Please check out the field.</span>');
      }
    });
  }

  if (allFilled == true) {
    var $name = $('input[name="user_name"]').val();
    var $email = $('input[name="user_email"]').val();
    var $pass = $('input[name="user_pass"]').val();
    var $firstName = $('input[name="firstname"]').val();
    var $lastName = $('input[name="lastname"]').val();
    var $contact = $('input[name="contact"]').val();
    var $skype = $('input[name="skype"]').val();
    var $degree = $('input[name="degree"]').val();
    var $field = $('input[name="field"]').val();
    var $about = $('textarea[name="about"]').val();
    var $image = sample
    var $resume = resume
    var form = new FormData();

    form.append('name', $name);
    form.append("email", $email);
    form.append("password", $pass);
    form.append("firstName", $firstName);
    form.append("lastName", $lastName);
    form.append("contact", $contact);
    form.append("skype", $skype);
    form.append("degree", $degree);
    form.append("field", $field);
    form.append("about", $about);
    form.append("sample", $image);
    form.append("resume", $resume);
    form.append('_token', '{{csrf_token()}}');

    $.ajax({
      type: "POST",
      url: "{{ url('other/teacher-apply') }}",
      data: form,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data) {
        if (data.status == 1) {
          $('.applyTeacher').addClass('next');
          $('.applyTeacher').click();
        } else if (data.status == 2) {
          var $html = '';
          $(data.errors).each(function(key, value) {
            for (var sd in value) {
              $html += '<div class="col-md-12 alert alert-danger alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' + value[sd][0] + '</div>';
            }
          });
          $(".guru_alert").append($html);
        } else if (data.status == 4) {
          var $html = '';
          $(data.errors).each(function(key, value) {
            for (var sd in value) {
              $html += '<div class="col-md-12 alert alert-danger alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' + value[sd][0] + '</div>';
            }
          });
          $(".guru_alert").append($html);
        }
      },
      error: function(data) {
        console.log(data);
      }
    });
  }
});

<fieldset class="w-600">
  <h2 class="text-purple f-ur">Register As Guru</h2>
  <div class="row">
    <div class="col-md-12 col-xs-12 col-sm-12">
      <div class="guru_alert"></div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label class="text-uppercase text-light-muted f-ur">first name</label>
        <input type="text" name="firstname" class="form-control manual" placeholder="First Name">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label class="text-uppercase text-light-muted f-ur">last name</label>
        <input type="text" name="lastname" class="form-control manual" placeholder="Last Name">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="text-uppercase text-light-muted f-ur">contact number</label>
        <input type="text" name="contact" class="form-control manual" placeholder="+961 - 555 5555">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label class="text-uppercase text-light-muted f-ur">skype id</label>
        <input type="text" name="skype" class="form-control manual" placeholder="Skype ID">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="text-uppercase text-light-muted f-ur">type of degree</label>
        <input type="text" name="degree" class="form-control manual" placeholder="(Separate by comma if you have multiple degrees)">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label class="text-uppercase text-light-muted f-ur">field</label>
        <input type="text" name="field" class="form-control manual" placeholder="Define your field">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="text-uppercase text-light-muted f-ur">About You</label>
        <textarea name="about" class="form-control manual" placeholder="Let us know more about you" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <input type="file" name="sample[]" id="fileup" class="form-control d-none" multiple>
        <button class="centered upload-btn" type="button"><img src="{!! asset('pmc_assets/img/drop.png') !!}" width="18">&nbsp;&nbsp;Upload work sample</button>
      </div>

      <ul class="attachment-list-teacher sample">
      </ul>

    </div>
    <div class="col-md-6">
      <div class="form-group">
        <input type="file" name="resume[]" id="fileup2" class="form-control d-none" multiple>
        <button class="centered upload-btn2" type="button"><img src="{!! asset('pmc_assets/img/drop.png') !!}" width="18">&nbsp;&nbsp;Upload resume</button>
      </div>

      <ul class="attachment-list-teacher resume">
      </ul>

    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <input type="file" name="resume" class="form-control" placeholder="name">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <input type="file" name="sample" class="form-control" placeholder="name">
      </div>
    </div>
  </div>
  <input type="button" name="next" class="applyTeacher get-width action-button" value="Next" />
</fieldset>

但是，现在当我单击“提交”按钮时，我没有得到两个图像值。我得到了total_files 2，但是即使我上传了多个文件，sample也仅给我1个文件，之后，当我在控制台中打印$ image的值时，它将给出undefined的示例。对于单个文件，效果很好。

谢谢。