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

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

发布时间 - 2026-01-07 00:00:00 点击率：次

本文详解如何通过 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 编码。

# javascript # word # laravel # java # jquery # html # js # 前端 # json # ajax

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：mysql登录成功但无法操作表怎么办_mysql权限不足说明

下一篇：Zoom如何退出会议_Zoom退出会议方法【方法】

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：mysql登录成功但无法操作表怎么办_mysql权限不足说明

下一篇：Zoom如何退出会议_Zoom退出会议方法【方法】