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

在实际开发中，常需实现“点击按钮即上传”而非依赖

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

✅ 注意：已添加 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 示例）：

极品模板多语言企业网站管理系统1.2.2

【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下： 01、支持多语言扩展（独立内容表，可一键复制中文版数据） 02、支持一键修改后台路径； 03、杜绝常见弱口令，内置多种参数过滤、有效防范常见XSS； 04、支持文件分片上传功能，实现大文件轻松上传； 05、支持一键获取微信公众号文章（保存文章的图片到本地服务器）； 06、支持一键

下载

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

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