本文详解如何在不依赖 `

` 标签和传统 submit 行为的前提下，通过原生 `formdata` 和 jquery ajax 正确上传文件（如图片），重点解决 `filelist` 对象误传导致后端无法解析的问题。

在前端文件上传场景中，许多开发者尝试绕过 <form> 提交，改用按钮触发 Ajax 上传，但常因对 input[type="file"].files 属性理解偏差而失败——例如直接将 FileList 对象（如 forminput[0].files）作为整体 append() 到 FormData 中，结果后端接收到的却是 [object FileList] 字符串，而非实际文件数据。

根本原因在于：FormData.append() 不支持直接传入 FileList 对象。它仅接受单个 File 或 Blob 实例。input.files 返回的是只读的 FileList 类数组对象，需显式遍历其中每个 File 项，逐个追加：

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

此外，还需确保 Ajax 配置正确：

Gradle 9.8.0

下载

• processData: false：禁止 jQuery 自动序列化数据（否则会破坏二进制文件流）；
• contentType: false：让浏览器自动设置 multipart/form-data 及边界（boundary），并携带正确的 Content-Type 头；
• cache: false：避免 IE 等浏览器缓存 GET 请求（虽此处为 POST，但属良好实践）。

完整修正后的 JavaScript 代码如下：

$('.formimgaj').each(function() {
  const fileInput = $( ".form-control-file", this )[0]; // 获取原生 DOM 元素
  $(this).find(".butt_img_upload").on('click', function(e) {
    e.preventDefault();

    if (!fileInput.files || fileInput.files.length === 0) {
      console.warn('未选择任何文件');
      return;
    }

    const formData = new FormData();
    // ✅ 关键：遍历 FileList，逐个 append 单个 File
    for (let i = 0; i < fileInput.files.length; i++) {
      formData.append('images[]', fileInput.files[i]);
    }
    formData.append('type', 'updateimg');

    $.ajax({
      type: 'POST',
      url: 'php/update.php',
      data: formData,
      processData: false,
      contentType: false,
      cache: false,
      success: function(response) {
        console.log('上传成功:', response);
      },
      error: function(xhr, status, err) {
        console.error('上传失败:', status, err);
      }
    });
  });
});

⚠️ 注意事项：

• HTML 中 enctype="multipart/form-data" 仅对 <form> 标签有效，放在 div 上无效，可安全移除；
• 若需支持多选（multiple），请为 <input type="file"> 添加 multiple 属性；
• 后端 PHP 接收时，$_FILES['images'] 将是标准多维数组结构（含 name、tmp_name、size 等），可直接循环处理：

  foreach ($_FILES['images']['tmp_name'] as $key => $tmp_name) {
      if (is_uploaded_file($tmp_name)) {
          move_uploaded_file($tmp_name, "uploads/{$_FILES['images']['name'][$key]}");
      }
  }

掌握 FileList 的遍历本质与 FormData 的接口约束，是实现无表单 Ajax 文件上传的关键一步。