使用Ajax上传文件时触发'Illegal invocation'错误的求助

问题根源 #

你犯了两个关键错误：

1. 把FormData对象作为普通JS对象的属性传递给$.post，触发了jQuery默认的序列化逻辑——而FormData无法被普通方式序列化，直接导致"Illegal invocation"错误。
2. processData和contentType是Ajax的配置选项，不是请求数据的一部分，不能放在data对象里。

修正方案 #

直接使用FormData承载所有请求数据（包括文件和普通字段），并通过$.ajax配置正确的上传参数：

手动构建FormData版本

// 获取文件输入框
const fileInput = $('.file-upload')[0];
const formData = new FormData();

// 添加文件（先判断是否选择了文件）
if (fileInput.files.length > 0) {
    formData.append('file', fileInput.files[0]);
}

// 添加其他表单字段
formData.append('action', 'update_settings');
formData.append('submit', true);
formData.append('username', $('input[name="username"]').val());
formData.append('email', $('input[name="email"]').val());

// 发起Ajax请求
$.ajax({
    url: url,
    type: 'POST',
    data: formData,
    processData: false, // 禁止jQuery序列化FormData（必须设置）
    contentType: false, // 让浏览器自动生成multipart/form-data请求头（必须设置）
    success: function(response) {
        // 处理成功响应
    },
    error: function(xhr, status, err) {
        // 处理错误
    }
});

简化版（直接用表单初始化FormData）

如果你的表单已经包含所有需要提交的字段（username、email、file），可以直接用表单元素创建FormData，省去手动append的步骤：

const form = $('form')[0];
const formData = new FormData(form);

// 添加额外的非表单字段（比如action）
formData.append('action', 'update_settings');

$.ajax({
    url: url,
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        // 处理响应
    }
});

关键配置说明 #

• processData: false：阻止jQuery把FormData转换成查询字符串，这是文件上传的必要设置。
• contentType: false：让浏览器自动生成正确的multipart/form-data请求头（包含自动生成的boundary分隔符），手动设置contentType: "multipart/form-data"会导致缺少boundary，同样无法上传文件。

内容的提问来源于stack exchange，提问作者B23