使用jQuery Ajax向PHP传输文件时页面意外跳转问题

核心问题在于你没阻止表单提交的默认浏览器行为——哪怕写了Ajax逻辑，浏览器还是会执行原生的表单跳转动作。另外还有个细节：你当前的Ajax代码里并没有正确携带文件数据，之前文件能成功上传，大概率是原生表单提交帮你完成的，而非Ajax的功劳。

下面给你一步步修正方案：

1. 先阻止表单默认跳转 #

这是解决页面重定向的关键，有两种常用实现方式：

方式一：调用event.preventDefault() #

在事件处理函数里接收event参数，直接阻止默认行为：

$('#myForm').submit(function (event) {
    // 优先阻止浏览器的原生表单提交跳转
    event.preventDefault();
    
    var file = $("#imgInp").get(0).files[0];
    // 后续Ajax逻辑...
});

方式二：函数末尾返回false #

这也是阻止默认行为的经典写法：

$('#myForm').submit(function () {
    // 你的Ajax逻辑...
    
    // 最后返回false，拦截默认跳转
    return false;
});

2. 正确通过Ajax上传文件 #

直接把文件放到普通data对象里无法被后端正确解析，必须用FormData来封装所有表单数据（包括文件）：

$('#myForm').submit(function (event) {
    event.preventDefault();
    
    // 创建FormData对象，自动收集整个表单的所有数据（含文件）
    var formData = new FormData(this);
    
    // 如果需要额外添加表单外的字段，可这样写：
    // formData.append('extraKey', 'extraValue');
    
    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        contentType: false,
        cache: false,
        processData: false, // 必须添加：告诉jQuery不要处理FormData格式
        data: formData, // 直接传入FormData对象
        success: function(res) {
            // 上传成功后的回调，比如给用户提示
            console.log('提交成功', res);
        },
        error: function(xhr) {
            // 处理上传失败的情况
            console.error('提交失败', xhr);
        }
    });
});

这里两个参数很关键：

• processData: false：避免jQuery把FormData转换成普通的查询字符串
• contentType: false：让浏览器自动生成正确的multipart/form-data请求头（带分隔符boundary）

补充：之前文件能上传的原因 #

因为你没阻止默认行为，浏览器同时执行了Ajax请求和原生表单提交，真正完成文件上传的是后者，而非你的Ajax代码。阻止默认行为后，只有Ajax会发起请求，这时候就必须用FormData来正确携带文件了。

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