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

在实际开发中，常需实现“点击按钮即上传选中文件”的交互（例如头像预览后一键更新、富文本编辑器内图片拖拽上传等），此时往往不希望包裹

正确做法是遍历 FileList，逐个将 File 实例追加至 FormData。每个 File 对象本身是 Blob 的子类，可被 FormData 原生识别并序列化为 multipart/form-data 的二进制字段。

以下是修正后的完整代码示例（含关键注释）：

浚心时尚购物商城程序

时尚购物程序v1.01、全立体设计。此系统由3个Flash动画为主线（正式版带原文件），设计更形象，网站更有吸引力。这种设计在网店系统内绝无仅有，使您的网店与众不同。2、内置音乐播放器，简单灵活的操作即可完成设置，前台任意调用。并带详细说明文件，一看就懂。合理使用此功能，可使网站更富渲染力。3、支持多图显示，每件产品最多可以上传9张图片。4、后台功能强大，销售管理，财务管理，在线支付平台管理等功能

下载

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

  uploadBtn.on('click', function(e) {
    e.preventDefault();

    // ✅ 关键：检查是否有文件被选择
    if (!fileInput || !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');

    // 可选：前端调试 —— 打印 FormData 内容（需配合 Response API）
    // new Response(formData).text().then(text => console.log('FormData content:', text));

    $.ajax({
      type: 'POST',
      url: 'php/update.php',
      data: formData,
      processData: false,  // ❗必须设为 false，禁止 jQuery 自动处理数据
      contentType: false,  // ❗必须设为 false，让浏览器自动设置正确的 multipart Content-Type
      cache: false,
      success: function(response) {
        console.log('上传成功:', response);
      },
      error: function(xhr, status, error) {
        console.error('上传失败:', status, error);
      }
    });
  });
});

⚠️ 注意事项与最佳实践：

• HTML 中无需 enctype 属性：enctype="multipart/form-data" 仅对 标签有效，
  上设置无效，应移除。
• 确保 input[type="file"] 支持多选：若需上传多张图片，请添加 multiple 属性：
  
• 后端接收逻辑需匹配：PHP 中应通过 $_FILES['images']['tmp_name'] 数组访问（注意是二维数组），例如：

  if ($_POST['type'] === 'updateimg' && !empty($_FILES['images']['name'])) {
      $fileCount = count($_FILES['images']['name']);
      for ($i = 0; $i < $fileCount; $i++) {
          $tmpName = $_FILES['images']['tmp_name'][$i];
          $name    = $_FILES['images']['name'][$i];
          // ... 移动文件、校验、保存等逻辑
      }
  }

• 增强用户体验：建议在上传前校验文件类型、大小，并提供加载状态提示（如禁用按钮、显示 spinner）。

通过以上方式，即可彻底摆脱表单束缚，灵活、可靠地实现无刷新文件上传，同时保证前后端数据结构一致、语义清晰。