使用FormData上传文件时出现Illegal Invocation错误求助

嘿，我来帮你分析下这个问题——你遇到的Illegal Invocation错误，在文件上传场景里大多是因为FormData的使用姿势不对，咱们一步步拆解修正：

核心错误点分析 #

先看你的jQuery代码，这里有两个关键问题：

1. 你给FormData添加的是file.name（这只是个文件名字符串），而不是实际的文件对象file，jQuery尝试序列化这个内容时就会抛出非法调用的错误；
2. 表单里的文件输入框name是attachPDFFile，但你AJAX里用的参数名是attachPDF，后端根本接不到文件；
3. 你没把表单里的隐藏字段（idEntite、typeEntite、typeScan）加到FormData里，如果后端需要这些参数，也会导致请求异常。

修正后的两种实现方式 #

方式一：直接基于表单生成FormData（最省心，不易出错） #

这种方式会自动把表单里的所有字段（文件+隐藏域）都打包进FormData，不用手动一个个加：

$("#attachPDFFile").on("change", function(){
    // 直接拿表单元素创建FormData
    const form = document.getElementById('sendPDF');
    const data = new FormData(form);

    $.ajax({
        url: siteUrl + "/action/actionCommon/attachPDF",
        type: 'POST',
        dataType: 'JSON',
        data: data,
        cache: false,
        contentType: false, // 必须设为false，让浏览器自动处理multipart请求头
        processData: false, // 必须设为false，禁止jQuery序列化FormData
        success: function(response) {
            // 这里写你的成功逻辑
            console.log('上传成功', response);
        },
        error: function(xhr, status, error) {
            // 错误处理
            console.error('上传失败', error);
        }
    });
});

方式二：手动构建FormData（适合需要自定义字段的场景） #

如果你需要灵活控制添加的字段，记得要传文件对象而非文件名，同时带上所有必填参数：

$("#attachPDFFile").on("change", function(){
    const file = this.files[0];
    if (!file) return; // 防止没选文件就触发请求

    const data = new FormData();
    // 传递实际的文件对象，参数名和表单name保持一致：attachPDFFile
    data.append('attachPDFFile', file);
    // 添加上其他隐藏字段
    data.append('idEntite', $('input[name="idEntite"]').val());
    data.append('typeEntite', $('input[name="typeEntite"]').val());
    data.append('typeScan', $('#typeScanPDF').val());

    $.ajax({
        url: siteUrl + "/action/actionCommon/attachPDF",
        type: 'POST',
        dataType: 'JSON',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response) {
            console.log('上传成功', response);
        },
        error: function(xhr, status, error) {
            console.error('上传失败', error);
        }
    });
});

额外注意事项 #

• 确认后端接口支持multipart/form-data类型的请求，并且参数名和你传递的完全匹配（比如文件参数名是attachPDFFile）；
• 可以打开浏览器开发者工具的Network面板，查看请求的FormData内容和请求头，确保Content-Type是浏览器自动生成的multipart/form-data; boundary=xxx（不要手动设置这个值）；
• 如果还是有问题，检查siteUrl是否正确，以及是否存在跨域问题（跨域的话后端需要配置CORS允许文件上传）。

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