如何通过 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 示例）：

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

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