如何通过 Ajax 无表单提交上传文件（支持多图）

在实际开发中，常需实现“点击按钮即上传”而非依赖 提交的交互模式。但初学者容易误将整个 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">
    &lt;input type=&quot;file&quot; name=&quot;images&quot; accept=&quot;image/*&quot; multiple class=&quot;form-control-file&quot;&gt;
    &lt;input class=&quot;btn btn-sm btn-success butt_img_upload&quot; value=&quot;上传图片&quot;&gt;
  </div>
</div>

✅ 注意：已添加 multiple 属性以支持多图选择；enctype="multipart/form-data" 在

上无效（仅 支持），可安全移除。

$('.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 示例）：

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 自动识别为数组）。

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

好了，本文到此结束，带大家了解了《如何通过 Ajax 无表单提交上传文件（支持多图） 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！