如何使用FormData将图片与其他表单字段一同提交至PHP后端

• 文本输入框未配置name属性：new FormData(表单DOM)自动采集字段时，仅会识别带name属性的表单控件，你写的姓名、中间名输入框只有id没有name，初始化FormData时根本不会采集这两个值。
• formData.append()参数顺序写错：该方法第一个参数是后端读取数据用的字段键名，第二个参数是对应的值。你写的formData.append(firstname_h, middlename_h)是把用户输入的名字内容作为键、中间名内容作为值追加，后端无法按预期的字段名拿到数据。
• 额外代码缺陷：两个元素共用id="highschool"违反HTML规范；submit事件绑定写在按钮onclick触发的函数内，每点一次按钮就会多绑定一次提交事件，极易触发重复提交。

1. 修改HTML部分：给两个文本输入框补全name属性，删除重复id，移除按钮上多余的onclick绑定

<form method="post" enctype="multipart/form-data" id="highschool">
  <div class="card">
    <div class="col-3">
      <label for="firstname">First name *</label>
      <input type="text" class="form-control" id="firstname_h" name="firstname_h" placeholder="First name" />
    </div>

    <div class="col-3">
      <label for="middlename">Middle name *</label>
      <input type="text" class="form-control" id="middlename_h" name="middlename_h" placeholder="Middle name" />
    </div>

    <div class="col-6">
      <label for="grade11_h">Grade 11 Transcript (image) *</label>
      <input type="file" class="form-control" name="grade11_h" id="grade11_h" accept=".png, .jpg, .jpeg">
    </div>
    <button type="submit" name="submit" class="btn btn-primary float-right">Submit</button>
  </div>
</form>

2. 修改JS部分：把事件绑定直接放在DOM加载完成回调里执行，删除多余的外层包裹函数，不需要手动append字段，初始化FormData时会自动采集所有带name的字段（包括文件）

jQuery(document).ready(function($) {
  $("#highschool").submit(function(event) {
    event.preventDefault();
    $("#progress").html(
      'Inserting <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>');

    // 所有带name属性的字段（文本、文件）都会被自动收集到formData中
    var formData = new FormData($(this)[0]);

    // 若后续需要额外追加字段，按 键名,值 的格式写即可，例：
    // formData.append('extra_field', 'extra_value');

    $.ajax({
      url: 'insertFunctions/insertHighSchool.php',
      type: 'POST',
      data: formData,
      async: true,
      cache: false,
      contentType: false,
      processData: false,
      success: function(returndata) {
        alert(returndata);
      },
      error: function(xhr, status, error) {
        console.error(xhr);
      }
    });
    return false;
  });
});

修改完成后提交时打开浏览器开发者工具，在网络面板找到对应POST请求，查看请求载荷即可看到文本字段和图片文件都已正常携带，后端按普通POST参数读取即可拿到所有数据。

内容的提问来源于stack exchange，提问作者Emmon