JQuery Ajax - 文件和数据上传

Question

我正在尝试创建一个在同一提交中上传数据和图像的表单。我看了一遍，我似乎只能找到那些用JQuery单独上传文件的人。如果我将 content-type 设为false，则数据不会仅通过该文件。这是代码：

<form action="/secret/includes/add_listing.php" id="listingfrm" name="listingfrm" action="javascript:;" enctype="multipart/form-data" method="post" accept-charset="utf-8">
  <div>
    <label for="title">Title</label>
    <div class="right">
      <div class="row">
        <div class="col-cst-1">
          <input type="text" name="title">
        </div>
      </div>
    </div>
  </div>
  <div>
    <label for="content">Description</label>
    <div class="right">
      <div class="row">
        <div class="col-cst-1">
          <textarea name="content" rows="5"></textarea>
        </div>
      </div>
    </div>
  </div>
  <div>
    <label for="image">Upload a Thumbnail</label>
    <!-- Browse to Upload Image (No more than 1MB) -->
    <div class="right">
      <div class="row">
        <div class="col-cst-1">
          <input type="file" name="listing_thumb" id="listing_thumb">
        </div>
      </div>
    </div>
  </div>
  <input type="submit" value="Submit">
</form>

function ajax(url, type, data) {
  var request
  if (type != "none") {
    request = $.ajax({
      url: url,
      type: type,
      data: data,
    });
  } else {
    request = $.ajax({
      url: url
    });
  }
  return request;
}
$(document).ready(function() {
  $(document).on("submit", "#listingfrm", function(event) {
    event.preventDefault();
    var form = $(this);
    var inputs = GetInputs(form);

    var serializedForm = form.serialize();
    inputs.prop("disabled", true);
    var request = ajax("includes/add_post.php", "post", serializedForm)
    request.done(function(response, textStatus, jqXHR) {
      console.log(response)
    })
    request.fail = ajax(function(jqXHR, textStatus, errorThrown) {
      console.error("Login Error: " + textStatus + " : " + errorThrown)
    })
    request.always(function() {
      inputs.prop("disabled", false);
    })
  });
});

当使用它时，标题和描述不会进入PHP文件，但是如果我不这样做那么图像不会。