如何使用 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 编码。