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

在前端文件上传场景中，许多开发者尝试绕过

根本原因在于：FormData.append() 不支持直接传入 FileList 对象。它仅接受单个 File 或 Blob 实例。input.files 返回的是只读的 FileList 类数组对象，需显式遍历其中每个 File 项，逐个追加：

for (let i = 0; i < forminput[0].files.length; i++) {
  form_data.append('images[]', forminput[0].files[i]);
}

此外，还需确保 Ajax 配置正确：

• processData: false：禁止 jQuery 自动序列化数据（否则会破坏二进制文件流）；
• contentType: false：让浏览器自动设置 multipart/form-data 及边界（boundary），并携带正确的 Content-Type 头；
• cache: false：避免 IE 等浏览器缓存 GET 请求（虽此处为 POST，但属良好实践）。

完整修正后的 JavaScript 代码如下：

浚心时尚购物商城程序

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

下载

$('.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 || 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');

    $.ajax({
      type: 'POST',
      url: 'php/update.php',
      data: formData,
      processData: false,
      contentType: false,
      cache: false,
      success: function(response) {
        console.log('上传成功:', response);
      },
      error: function(xhr, status, err) {
        console.error('上传失败:', status, err);
      }
    });
  });
});

⚠️ 注意事项：

• HTML 中 enctype="multipart/form-data" 仅对 标签有效，放在 div 上无效，可安全移除；
• 若需支持多选（multiple），请为 添加 multiple 属性；
• 后端 PHP 接收时，$_FILES['images'] 将是标准多维数组结构（含 name、tmp_name、size 等），可直接循环处理：

  foreach ($_FILES['images']['tmp_name'] as $key => $tmp_name) {
      if (is_uploaded_file($tmp_name)) {
          move_uploaded_file($tmp_name, "uploads/{$_FILES['images']['name'][$key]}");
      }
  }