AJAX表单上传图片遇FormData为空及data未定义错误求助

首先，先解决你控制台抛出的Uncaught ReferenceError: data is not defined报错——这个问题非常直接：你在代码里引用了名为data的变量，但它既没有被声明，也没有被初始化（比如创建FormData实例赋值给它），这是第一个要修正的点。

接下来，针对FormData无法正常工作、上传数据为空的问题，我给你梳理几个关键步骤和常见坑：

1. 正确创建FormData实例 #

你有两种方式创建包含图片的FormData，选适合你的场景：

方式一：直接通过表单元素创建（推荐，自动包含所有表单字段） #

如果你的图片是在一个表单里的文件输入框，直接用表单DOM实例初始化FormData即可：

// 替换成你的表单ID
const form = document.getElementById('your-form-id');
// 这里的data就是我们要用到的FormData实例，终于定义了！
const data = new FormData(form);

方式二：手动添加文件（适合非表单场景） #

如果不是用完整表单，而是单独处理文件输入框，可以手动把文件添加到FormData：

const data = new FormData();
// 替换成你的文件输入框ID
const fileInput = document.getElementById('f3_file');
// 确保用户选择了文件再添加
if (fileInput.files.length > 0) {
  data.append('f3_file', fileInput.files[0]);
}

2. jQuery AJAX的关键配置（必须注意） #

因为你用的是jQuery 3.3.1，发送AJAX请求时这两个参数绝对不能少，否则FormData会被破坏：

$.ajax({
  url: 'form.php', // 你的后端处理地址
  method: 'POST',
  data: data, // 这里的data就是上面创建的FormData实例
  processData: false, // 禁止jQuery自动处理FormData（否则会把它转成字符串，丢失文件）
  contentType: false, // 禁止jQuery设置Content-Type，让浏览器自动生成multipart/form-data头
  success: function(res) {
    console.log('上传成功:', res);
  },
  error: function(xhr, err) {
    console.error('上传出错:', err);
  }
});

3. 避开这些常见坑 #

• 表单的enctype属性：如果用方式一创建FormData，给表单加上enctype="multipart/form-data"会更稳妥（虽然浏览器会自动处理，但避免意外）。
• 文件输入框的name属性：你的后端要通过f3_file获取文件，所以输入框的name必须是f3_file，否则后端拿不到数据。
• 不要序列化FormData：别用JSON.stringify(data)或者手动拼接，这会直接破坏FormData的二进制结构。

最后再回头检查你的代码，确保所有用到data的地方，都已经先通过new FormData()创建并赋值了这个变量，这样就能解决那个未定义的报错，同时让FormData正常工作啦。

内容的提问来源于stack exchange，提问作者Omar España