本文详解如何在不使用 `

` 标签和传统 submit 行为的前提下，利用 `formdata` 和原生 file api 通过 ajax 上传图片，并正确处理 `filelist` 对象，避免后端收到 `[object filelist]` 字符串的问题。

在实际开发中，常需实现“点击按钮即上传”而非依赖 <form> 提交的交互模式。但初学者容易误将整个 HTMLInputElement.files（即 FileList 对象）直接传入 FormData.append()，导致 PHP 后端接收到的是字符串 "[object FileList]"，而非真实的文件数据——这是因为 FileList 不可直接序列化，必须显式遍历其内部 File 实例。

正确做法是：逐项提取 files[i] 并单独 append 到 FormData。以下是优化后的完整实现：

<div class="col-12 col-sm-6 pt-sm-3 formimgaj">
  <div class="form-group">
    <input type="file" name="images" accept="image/*" multiple class="form-control-file">
    <input class="btn btn-sm btn-success butt_img_upload" value="上传图片">
  </div>
</div>

✅ 注意：已添加 multiple 属性以支持多图选择；enctype="multipart/form-data" 在 <div> 上无效（仅 <form> 支持），可安全移除。

$('.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.length) {
      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]); // 名称带 [] 以匹配 $_FILES['images']
    }
    formData.append('type', 'updateimg');

    // 可选：前端调试 —— 打印 FormData 内容（需浏览器支持）
    for (let [key, value] of formData.entries()) {
      console.log(key, value instanceof File ? `${value.name} (${value.size}B)` : value);
    }

    $.ajax({
      type: 'POST',
      url: 'php/update.php',
      data: formData,
      processData: false, // ❌ 必须设为 false，禁用 jQuery 自动转换
      contentType: false, // ❌ 必须设为 false，让浏览器自动设置 multipart boundary
      cache: false,
      success: function(response) {
        console.log('上传成功:', response);
      },
      error: function(xhr) {
        console.error('上传失败:', xhr.status, xhr.statusText);
      }
    });
  });
});

? 后端 PHP 接收要点（php/update.php 示例）：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

if ($_POST['type'] === 'updateimg' && !empty($_FILES['images'])) {
    $uploads = [];
    foreach ($_FILES['images']['tmp_name'] as $index => $tmpName) {
        if ($tmpName && is_uploaded_file($tmpName)) {
            $name = $_FILES['images']['name'][$index];
            $path = 'uploads/' . uniqid() . '_' . basename($name);
            if (move_uploaded_file($tmpName, $path)) {
                $uploads[] = $path;
            }
        }
    }
    echo json_encode(['success' => true, 'uploaded' => $uploads]);
} else {
    http_response_code(400);
    echo json_encode(['error' => '无效的文件上传请求']);
}

⚠️ 常见陷阱提醒：

• FormData.append('key', files) 错误：files 是 FileList，不是 File；
• 忘记 processData: false 和 contentType: false → 导致文件被转成字符串或 400 错误；
• 未检查 files.length 直接遍历 → 点击无文件时抛错；
• 前端 name="images" 与后端 $_FILES['images'] 必须严格一致，多文件请用 images[]（PHP 自动识别为数组）。

掌握这一模式后，你可灵活集成至拖拽上传、图片预览、分片上传等进阶场景，真正实现解耦、可控、现代化的文件交互体验。