为何title_img上传按钮在PHP中显示Undefined？求技术支持

问题概述 #

我有一个名为title_img的单文件上传按钮，以及一个多文件上传按钮。但在PHP中输出$_FILES['title_img']时，该值显示为Undefined，相关代码如下：

HTML代码 #

<form method="post" class="add-form" enctype="multipart/form-data">
  <section class="flex flex-row flex-wrap file-c">
    <section class="relative">
      <!--default html file upload button-->
      <input type="file" name="title_img" id="titel-img" />
    </section>
    <section class="relative">
      <!--default html file upload button-->
      <input type="file" name="files[]" multiple id="actual-btn" hidden/>
      <!--our custom file upload button-->
      <label for="actual-btn">Bilder Hochladen</label>
    </section>
  </section>
  ....
</form>

JS代码 #

const files = document.querySelector('#actual-btn').files;
const form = new FormData();

form.append('t_img', document.querySelector('#titel-img').files[0]);

for(let i = 0; i < files.length; i++) {
  let file = files[i];
  form.append('files[]', file);
}

const res = await fetch('xxx.php', {
  method: 'POST',
  body: form
});
const data = await res.json();
...

PHP代码 #

<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if(isset($_SESSION['admin'])) {
  require_once __DIR__ . '/../config/db.php';

  $path = '../img/cars/';
  $success = false;
  
  var_dump($_FILES['title_img']);
....
?>

原因分析 #

• FormData键名与PHP获取的键名不匹配：JS代码中通过form.append('t_img', ...)将单文件上传的字段名设为t_img，但PHP中尝试读取的是title_img，两者名称不一致，导致$_FILES['title_img']不存在。
• HTML输入框ID存在拼写误差：HTML中输入框的ID是titel-img（拼写为t-i-t-e-l），虽然当前JS能正确选中该元素，但与字段名title_img的拼写不一致，容易引发后续维护混淆。

解决方案 #

1. 修正FormData的字段名：将JS代码中form.append的第一个参数改为title_img，确保与PHP中要获取的键名一致：

form.append('title_img', document.querySelector('#titel-img').files[0]);

2. 可选：统一HTML输入框ID命名：将HTML中输入框的id="titel-img"改为id="title-img"，让ID与字段名保持一致，提升代码可读性：

<input type="file" name="title_img" id="title-img" />

修改后，PHP中$_FILES['title_img']就能正确获取到上传的文件信息了。

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