如何使用 jQuery Ajax 在 Laravel 中上传图片并提交表单数据

本文详解如何通过 formdata 正确获取 html 表单中的图片文件（含名称、类型、大小等信息），并结合其他字段通过 jquery ajax 提交至 laravel 后端，彻底解决“uncaught typeerror: illegal invocation”错误。

在 前端 与 Laravel 后端交互中，上传图片并同时提交文本字段（如姓名、邮箱、密码等）是一个高频需求。但直接将 FormData 对象作为普通 JSON 字段混入对象（如 image: formdata）会导致 Uncaught TypeError: Illegal invocation —— 这是因为 jQuery 默认尝试对 FormData 执行 JSON 序列化，而 FormData 不可被 JSON.stringify() 处理，且其内部方法调用上下文被破坏。

✅ 正确做法：仅用 FormData 统一承载所有数据

FormData 本身支持追加字符串字段和文件字段，无需额外包装成对象。关键要点如下：

• ❌ 错误：data: {image: formdata, first_name: ‘…’}
• ✅ 正确：formdata.append(‘first_name’, $(‘#first_name’).val())，再统一提交 formdata

✅ 完整可运行示例代码

HTML（确保包含所有必要输入框）：

   
                          تصویر (اختیاری)     
            
   
    
     
                افزودن            
   
 

JavaScript / jQuery（关键修复点已注释）：

$('#form').on('click', '#registerSubmit', function() {const formdata = new FormData();    // ✅ 追加文件（支持多图，此处按单图处理）const imageInput = $('#image')[0];   if (imageInput.files && imageInput.files[0]) {const file = imageInput.files[0];     console.log('File name:', file.name);     console.log('File size:', file.size + 'bytes');     console.log('File type:', file.type);     formdata.append('image', file);   }    // ✅ 追加文本字段（注意：不要用 .val() 空值校验，Laravel 层应做空判断）formdata.append('first_name', $('#first_name').val().trim());   formdata.append('email', $('#email').val().trim());   formdata.append('password', $('#password').val());   formdata.append('re_password', $('#re_password').val());    // ✅ 如需携带 Token（如 Bearer），推荐用 Authorization Header（更安全）// formdata.append('access_token', getCookie('access_token')); // 不推荐放 body   // 更佳实践：// headers: {'Authorization': 'Bearer' + getCookie('access_token') }    // ✅ 发起 Ajax 请求 —— 关键配置项   $.ajax({url: 'http://localhost:8000/api/admins/create',     type: 'POST',     data: formdata,     processData: false,   // ✅ 必须设为 false，禁用 jQuery 自动转换     contentType: false,   // ✅ 必须设为 false，让浏览器自动设置 multipart boundary     cache: false,     timeout: 30000,     beforeSend: function(xhr) {// 可在此添加 loading 效果或 Token 头       // xhr.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));     },     success: function(response) {console.log('✅ Success:', response);       alert('ثبت با موفقیت انجام شد!');       $('#form')[0].reset(); // 重置表单},     error: function(xhr, status, error) {console.error('❌ Error:', error);       const errors = xhr.responseJSON?.message || xhr.responseText;       alert('خطا:' + (typeof errors === 'string' ? errors : JSON.stringify(errors)));     }   }); });

⚠️ 注意事项与最佳实践

• CSRF 保护：Laravel 要求 POST 请求携带 CSRF Token。建议在

  中添加：

  并在 beforeSend 中设置头：
  xhr.setRequestHeader(‘X-XSRF-TOKEN’, $(‘meta[name=”csrf-token”]’).attr(‘content’));

• Token 安全性：避免将 access_token 放入 FormData 或 URL；应使用 Authorization: Bearer 请求头。

• 后端接收：Laravel 控制器中需使用 $request->file(‘image’) 获取上传文件，并用 $request->validated() 或 $request->all() 获取其他字段。

• 图片验证（Laravel 示例）：

  $request->validate(['first_name' => 'required|string|max:255',     'email'      => 'required|email|unique:admins',     'password'   => 'required|min:6|confirmed',     'image'      => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048', // 2MB 限制 ]);

• 兼容性提示：FormData 在 IE10+ 支持良好；若需兼容旧版 IE，请改用 iframe 模拟异步上传。

掌握这一模式后，你不仅能稳定上传图片，还能灵活扩展为多文件、拖拽上传、进度条显示等高级功能。核心始终是：用 FormData 统一管理，禁用 processData 和 contentType，让浏览器原生处理 multipart 编码。