如何使用 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 代码如下：

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