如何无刷新提交含文件表单？遇边界缺失及非法调用错误求助

问题根源 #

1. serialize()方法仅能序列化普通文本类表单字段，无法处理文件类型输入，导致文件无法被携带到请求中。
2. 手动设置contentType: 'multipart/form-data'会覆盖浏览器自动生成的边界标识（boundary），引发服务器报错the request was rejected because no multipart boundary was found。
3. 使用new FormData(this)时出现"Illegal invocation"错误，是因为jQuery默认会尝试将FormData对象转换为字符串，需要关闭该自动处理行为。

正确实现方案 #

使用FormData对象包装表单，并配置jQuery Ajax的两个关键参数：

• processData: false：禁止jQuery处理FormData数据（避免转换为字符串）
• contentType: false：让浏览器自动生成包含正确边界的multipart/form-data请求头

修正后的完整代码 #

表单部分（无需修改）

<form id="settings" method="POST" enctype="multipart/form-data">
    <!-- 其他表单字段 -->
    <input type="file" id="logo" style="display:none;" name="logo" accept="image/png, image/jpeg, image/gif">
    <button type="submit" id="send" class="btn btn-primary">save</button>
</form>

Ajax脚本

$('#settings').submit(function(e){
    e.preventDefault();
    // 用FormData包装当前表单DOM元素
    var formData = new FormData(this);
    
    $.ajax({
        url         : '/settings',
        type        : 'POST',
        crossDomain : false,
        data        : formData,
        processData : false, // 禁止处理数据
        contentType : false, // 自动生成请求头
        dataType    : 'json',
        cache       : false,
        success     : function(r){
            alert('提交成功');
        }
    }).fail(function(xhr, status, error){
        console.log('提交失败:', error);
    });
});

额外说明 #

• 表单必须保留enctype="multipart/form-data"属性，这是文件上传的必要前提。
• 文件输入框必须设置name属性（如示例中的name="logo"），否则FormData无法收集该文件。
• 如需额外添加字段到请求中，可使用formData.append('字段名', '字段值')方法。

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