当前位置：首页 > 文章列表 > 文章 > php教程 > 如何通过 Ajax 无表单提交上传文件（支持多图）

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

2026-02-06 12:00:17 0浏览收藏

你在学习文章相关的知识吗？本文《如何通过 Ajax 无表单提交上传文件（支持多图）》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

本文详解如何在不使用 `

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

在实际开发中，常需实现“点击按钮即上传”而非依赖提交的交互模式。但初学者容易误将整个 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' => '无效的文件上传请求']);
}

⚠️ 常见陷阱提醒：