如何用jQuery AJAX上传不在<form>中的文件？解决非法调用错误

出现Illegal invocation错误的核心原因是：jQuery默认会对data参数做序列化处理，但File/Blob对象无法被这套逻辑解析。要解决问题，需要用FormData包装文件，并禁用jQuery的自动处理逻辑：

修改后的代码 #

function clickSubmitUploadFiles(event, ogoneRef) {
    let files = event.target.files;
    [...files].forEach(function (file) {
        let urlString = 'http://localhost:8085/papertrail/upload-document/'+userName+'/'+ogoneRef;
        
        // 用FormData包装文件
        const formData = new FormData();
        // 第一个参数是后端接收文件的参数名，要和后端接口定义一致
        formData.append('uploadFileNameForCustomerInvoices', file);

        $.ajax({
            type: "POST",
            url: urlString,
            headers: {
                "Authorization": "Basic " + btoa(username+":"+password)
            },
            data: formData,
            processData: false, // 禁止jQuery序列化FormData
            contentType: false, // 让浏览器自动生成正确的multipart请求头
            error : function (result) {
                console.log('error', result);
            },
            success : function (result) {
                console.log('success', result)
            }
        });
    });
}

关键细节说明 #

1. FormData的作用：它是浏览器提供的专门用于处理表单数据（包括文件）的对象，能将文件二进制数据包装成符合multipart/form-data格式的内容，这是后端接收文件的标准格式。append的第一个参数要和后端接收文件的参数名匹配（比如你原input的name属性值）。
2. processData: false：jQuery默认会把data转成application/x-www-form-urlencoded格式的字符串，但FormData不需要这个处理，强行序列化会导致Blob/File对象的非法调用错误。
3. contentType: false：如果不设置，jQuery会默认设置Content-Type: application/x-www-form-urlencoded，这不符合文件上传的要求。设置为false后，浏览器会自动生成包含分隔符的multipart/form-data请求头，确保后端能正确解析文件。

你的jQuery版本是1.10.2，完全支持FormData，只要浏览器是IE10及以上或其他主流浏览器，就能正常运行。

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